/* PROA Base UI tokens. Values come from PROA Foundations rev. 03 from
   PROA-Advisory/proa-platform @ e7df8294a3807a48c936f105301b9d73cb43febe
   (docs/design-system/sistema/project/tokens.json); see README.md, "Source and credit". */
@layer proa.tokens {
  :root {
    color-scheme: light;

    /* PROA Foundations rev. 03: ramps. */
    --proa-color-slate-50: #f3f6f6;
    --proa-color-slate-100: #e7edee;
    --proa-color-slate-200: #d1dcde;
    --proa-color-slate-300: #afbec1;
    --proa-color-slate-400: #829a9f;
    --proa-color-slate-500: #5e7b81;
    --proa-color-slate-600: #3c4f53;
    --proa-color-slate-700: #304145;
    --proa-color-slate-800: #243236;
    --proa-color-slate-900: #18262a;
    --proa-color-slate-950: #111b1f;
    --proa-color-teal-50: #f0f8f8;
    --proa-color-teal-100: #e1f0f1;
    --proa-color-teal-200: #bfe0e2;
    --proa-color-teal-300: #95c4c8;
    --proa-color-teal-400: #6caaae;
    --proa-color-teal-500: #489197;
    --proa-color-teal-600: #35757a;
    --proa-color-teal-700: #2c5e63;
    --proa-color-teal-800: #274d51;
    --proa-color-teal-900: #243f42;
    --proa-color-teal-950: #14272b;
    --proa-color-orange-50: #fff4ee;
    --proa-color-orange-100: #ffe7d8;
    --proa-color-orange-200: #ffceaf;
    --proa-color-orange-300: #ffa47c;
    --proa-color-orange-400: #fb7e52;
    --proa-color-orange-500: #f1582e;
    --proa-color-orange-600: #cc431f;
    --proa-color-orange-700: #ad361b;
    --proa-color-orange-800: #922c1a;
    --proa-color-orange-900: #76291b;
    --proa-color-orange-950: #401108;

    /* PROA Foundations rev. 03: roles (light). */
    --proa-canvas: #f4f7f7;
    --proa-frame: #edf3f3;
    --proa-canvas-glow: rgba(225,240,241,.28);
    --proa-surface: #ffffff;
    --proa-surface-muted: #fafcfc;
    --proa-surface-raised: #ffffff;
    --proa-surface-hover: #f4f8f8;
    --proa-surface-glass: rgba(255,255,255,.97);
    --proa-chrome-start: rgba(248,252,252,.92);
    --proa-chrome-end: rgba(234,242,242,.86);
    --proa-chrome-bar: rgba(255,255,255,.67);
    --proa-chrome-solid: #f8fbfb;
    --proa-line: #dce5e6;
    --proa-line-soft: #e5ecec;
    --proa-line-button: #d5e0e2;
    --proa-line-hover: #abc2c6;
    --proa-line-strong: #cbdadd;
    --proa-line-control: #7b9096;
    --proa-ink: var(--proa-color-slate-900);
    --proa-ink-title: var(--proa-color-slate-700);
    --proa-ink-label: var(--proa-color-slate-600);
    --proa-ink-body: #4d6971;
    --proa-ink-muted: #566a6f;
    --proa-ink-inverse: #ffffff;
    --proa-accent: var(--proa-color-teal-500);
    --proa-accent-strong: var(--proa-color-teal-600);
    --proa-accent-text: var(--proa-color-teal-700);
    --proa-accent-soft: var(--proa-color-teal-100);
    --proa-accent-line: #cde1e3;
    --proa-action: var(--proa-action-primary-bg);
    --proa-action-hover: var(--proa-action-primary-hover-bg);
    --proa-on-action: var(--proa-action-primary-fg);
    --proa-brand: var(--proa-color-orange-500);
    --proa-brand-soft: var(--proa-color-orange-50);
    --proa-brand-line: #f5ddcf;
    --proa-brand-text: var(--proa-color-orange-700);
    --proa-glass-fill: rgba(255,255,255,.54);
    --proa-glass-line: #d7e3e5;
    --proa-meter-fill: var(--proa-color-teal-300);
    --proa-meter-empty: var(--proa-color-slate-200);
    --proa-control-dark: var(--proa-color-slate-700);
    --proa-on-control-dark: #ffffff;
    --proa-positive: #237352;
    --proa-positive-soft: #ecf7f0;
    --proa-positive-line: #d7ecdd;
    --proa-attention: #966219;
    --proa-attention-ink: #7b5b2a;
    --proa-attention-soft: #fff5e5;
    --proa-attention-wash: #fffcf7;
    --proa-attention-line: #efdfbf;
    --proa-negative: #b63b44;
    --proa-negative-soft: #fceef0;
    --proa-negative-line: #f2d5d9;
    --proa-info: #386eaa;
    --proa-info-soft: #eef4fb;
    --proa-info-line: #d3e2f3;
    --proa-service-finance: #806520;
    --proa-service-legal: #4a6fa5;
    --proa-service-accounting: #5c6f5b;
    --proa-bubble-start: #edf5f5;
    --proa-bubble-end: #e7f0f1;
    --proa-bubble-line: #d9e6e8;
    --proa-notice: #263c42;
    --proa-on-notice: #ffffff;
    --proa-scrim: rgba(24,38,42,.13);
    --proa-scrim-nav: rgba(24,38,42,.15);

    /* PROA Foundations rev. 03: shadows. */
    --proa-shadow-control: inset 0 1px #ffffff, 0 1px 2px #18262a05;
    --proa-shadow-sheet: 0 12px 32px #18262a08, 0 1px 3px #18262a05;
    --proa-shadow-float: 0 18px 48px #18262a20, 0 3px 9px #18262a08;
    --proa-shadow-frame: 0 30px 60px -20px #3c4f5325, 0 6px 18px #3c4f5308;

    /* PROA Foundations rev. 03: type. */
    --proa-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --proa-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    --proa-type-title-xl-size: 24px;
    --proa-type-title-xl-line-height: 28px;
    --proa-type-title-xl-weight: 600;
    --proa-type-title-xl-tracking: -0.045em;
    --proa-type-title-lg-size: 22px;
    --proa-type-title-lg-line-height: 28px;
    --proa-type-title-lg-weight: 600;
    --proa-type-title-lg-tracking: -0.03em;
    --proa-type-title-md-size: 18px;
    --proa-type-title-md-line-height: 24px;
    --proa-type-title-md-weight: 600;
    --proa-type-title-md-tracking: -0.03em;
    --proa-type-title-size: 15px;
    --proa-type-title-line-height: 21px;
    --proa-type-title-weight: 600;
    --proa-type-title-tracking: -0.02em;
    --proa-type-title-sm-size: 14px;
    --proa-type-title-sm-line-height: 20px;
    --proa-type-title-sm-weight: 600;
    --proa-type-title-sm-tracking: -0.02em;
    --proa-type-title-xs-size: 12px;
    --proa-type-title-xs-line-height: 18px;
    --proa-type-title-xs-weight: 600;
    --proa-type-body-size: 12px;
    --proa-type-body-line-height: 22px;
    --proa-type-body-weight: 400;
    --proa-type-body-sm-size: 12px;
    --proa-type-body-sm-line-height: 20px;
    --proa-type-body-sm-weight: 400;
    --proa-type-label-size: 11px;
    --proa-type-label-line-height: 16px;
    --proa-type-label-weight: 550;
    --proa-type-caption-size: 11px;
    --proa-type-caption-line-height: 16px;
    --proa-type-caption-weight: 400;
    --proa-type-eyebrow-size: 11px;
    --proa-type-eyebrow-line-height: 16px;
    --proa-type-eyebrow-weight: 600;
    --proa-type-eyebrow-tracking: 0.08em;
    --proa-type-figure-size: 25px;
    --proa-type-figure-line-height: 28px;
    --proa-type-figure-weight: 600;
    --proa-type-figure-tracking: -0.045em;
    --proa-type-figure-sm-size: 20px;
    --proa-type-figure-sm-line-height: 24px;
    --proa-type-figure-sm-weight: 600;
    --proa-type-figure-sm-tracking: -0.035em;
    --proa-type-kbd-size: 11px;
    --proa-type-kbd-line-height: 14px;
    --proa-type-kbd-weight: 500;

    /* PROA Foundations rev. 03: spacing. */
    --proa-space-1: 4px;
    --proa-space-2: 8px;
    --proa-space-3: 12px;
    --proa-space-4: 16px;
    --proa-space-5: 20px;
    --proa-space-6: 24px;
    --proa-space-8: 32px;

    /* PROA Foundations rev. 03: radius. */
    --proa-radius-xs: 4px;
    --proa-radius-pill: 6px;
    --proa-radius-sm: 8px;
    --proa-radius-control: 10px;
    --proa-radius-card: 12px;
    --proa-radius-menu: 15px;
    --proa-radius-composer: 17px;
    --proa-radius-app: 18px;
    --proa-radius-sheet: 20px;
    --proa-radius-frame: 25px;

    /* PROA Foundations rev. 03: size. */
    --proa-size-control: 34px;
    --proa-size-control-sm: 29px;
    --proa-size-square: 32px;
    --proa-size-touch: 44px;
    --proa-size-sidebar: 254px;
    --proa-size-sidebar-md: 224px;
    --proa-size-rail: 72px;
    --proa-size-topbar: 77px;
    --proa-size-topbar-compact: 69px;
    --proa-size-thread: 338px;
    --proa-size-thread-wide: 362px;
    --proa-size-sheet: 410px;

    /* PROA Foundations rev. 03: breakpoint. */
    --proa-bp-wide: 1440px;
    --proa-bp-md: 1200px;
    --proa-bp-rail: 1000px;
    --proa-bp-compact: 780px;
    --proa-bp-phone: 480px;
    --proa-bp-phone-sm: 360px;

    /* PROA Foundations rev. 03: zIndex. */
    --proa-z-sidebar: 4;
    --proa-z-overlay: 7;
    --proa-z-drawer-scrim: 30;
    --proa-z-drawer: 31;
    --proa-z-sheet-scrim: 48;
    --proa-z-sheet: 49;
    --proa-z-menu: 65;
    --proa-z-notice: 99;

    /* Base semantic tokens: stable names, PROA Foundations values. */
    --proa-bg-app: var(--proa-canvas);
    --proa-bg-surface: var(--proa-surface);
    --proa-bg-subtle: var(--proa-surface-muted);
    --proa-text-primary: var(--proa-ink);
    --proa-text-secondary: var(--proa-ink-body);
    --proa-text-muted: var(--proa-ink-muted);
    --proa-text-link: var(--proa-accent-light-text-link, var(--proa-accent-text));
    --proa-border-default: var(--proa-line-control);
    --proa-border-subtle: var(--proa-line);
    --proa-focus: var(--proa-accent-light-focus, var(--proa-color-teal-600));
    --proa-focus-contrast: var(--proa-surface);
    --proa-action-primary-bg: var(--proa-accent-light-action-primary-bg, var(--proa-color-orange-600));
    --proa-action-primary-fg: var(--proa-accent-light-action-primary-fg, #ffffff);
    --proa-action-primary-hover-bg: var(--proa-accent-light-action-primary-hover-bg, var(--proa-color-orange-700));
    --proa-action-primary-active-bg: var(--proa-accent-light-action-primary-active-bg, var(--proa-color-orange-800));
    --proa-action-secondary-bg: var(--proa-surface);
    --proa-action-secondary-fg: var(--proa-ink-label);
    --proa-action-secondary-hover-bg: var(--proa-surface-hover);
    --proa-action-secondary-active-bg: var(--proa-line);
    --proa-action-selected-bg: var(--proa-accent-light-action-selected-bg, var(--proa-accent-soft));
    --proa-action-selected-fg: var(--proa-accent-light-action-selected-fg, var(--proa-accent-text));
    --proa-action-disabled-bg: var(--proa-surface-muted);
    --proa-action-disabled-fg: var(--proa-ink-muted);
    --proa-action-disabled-border: var(--proa-line-control);
    --proa-action-danger-bg: var(--proa-negative);
    --proa-action-danger-fg: #ffffff;
    --proa-action-danger-hover-bg: #9b323a;
    --proa-action-danger-active-bg: #7f2930;
    --proa-loading-track: var(--proa-meter-empty);
    --proa-loading-accent: var(--proa-accent-strong);
    --proa-state-info-fg: var(--proa-info);
    --proa-state-info-bg: var(--proa-info-soft);
    --proa-state-info-border: var(--proa-info);
    --proa-state-success-fg: var(--proa-positive);
    --proa-state-success-bg: var(--proa-positive-soft);
    --proa-state-success-border: var(--proa-positive);
    --proa-state-warning-fg: var(--proa-attention);
    --proa-state-warning-bg: var(--proa-attention-soft);
    --proa-state-warning-border: var(--proa-attention);
    --proa-state-error-fg: var(--proa-negative);
    --proa-state-error-bg: var(--proa-negative-soft);
    --proa-state-error-border: var(--proa-negative);

    --proa-text-sm: var(--proa-type-label-size);
    --proa-text-base: var(--proa-type-body-size);
    --proa-text-lg: var(--proa-type-title-md-size);
    --proa-leading: calc(20 / 12);
    --proa-radius-md: var(--proa-radius-card);
    --proa-shadow-raised: var(--proa-shadow-sheet);
    --proa-motion-fast: 120ms;
    --proa-touch-target: var(--proa-size-touch);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-proa-theme="light"]):not([data-proa-theme="dark"]) {
      color-scheme: dark;
      /* PROA Foundations rev. 03: roles (dark). */
      --proa-canvas: var(--proa-color-slate-950);
      --proa-frame: var(--proa-color-slate-950);
      --proa-canvas-glow: rgba(72,145,151,.06);
      --proa-surface: var(--proa-color-slate-900);
      --proa-surface-muted: #1d2b2f;
      --proa-surface-raised: var(--proa-color-slate-800);
      --proa-surface-hover: #2a3a3e;
      --proa-surface-glass: rgba(36,50,54,.96);
      --proa-chrome-start: var(--proa-color-slate-700);
      --proa-chrome-end: var(--proa-color-slate-900);
      --proa-chrome-bar: rgba(24,38,42,.72);
      --proa-chrome-solid: var(--proa-color-slate-800);
      --proa-line: var(--proa-color-slate-700);
      --proa-line-soft: #263539;
      --proa-line-button: var(--proa-color-slate-600);
      --proa-line-hover: var(--proa-color-slate-500);
      --proa-line-strong: var(--proa-color-slate-600);
      --proa-line-control: var(--proa-color-slate-500);
      --proa-ink: var(--proa-color-slate-100);
      --proa-ink-title: var(--proa-color-slate-100);
      --proa-ink-label: var(--proa-color-slate-200);
      --proa-ink-body: var(--proa-color-slate-300);
      --proa-ink-muted: var(--proa-color-slate-300);
      --proa-ink-inverse: var(--proa-color-slate-950);
      --proa-accent: var(--proa-color-teal-400);
      --proa-accent-strong: var(--proa-color-teal-400);
      --proa-accent-text: var(--proa-color-teal-300);
      --proa-accent-soft: rgba(72,145,151,.2);
      --proa-accent-line: rgba(72,145,151,.36);
      --proa-brand-soft: rgba(241,88,46,.16);
      --proa-brand-line: rgba(241,88,46,.32);
      --proa-brand-text: var(--proa-color-orange-300);
      --proa-glass-fill: rgba(255,255,255,.035);
      --proa-glass-line: rgba(255,255,255,.09);
      --proa-meter-fill: var(--proa-color-teal-400);
      --proa-meter-empty: var(--proa-color-slate-700);
      --proa-control-dark: var(--proa-color-slate-100);
      --proa-on-control-dark: var(--proa-color-slate-700);
      --proa-positive: #5cc08a;
      --proa-positive-soft: #15301f;
      --proa-positive-line: #24503a;
      --proa-attention: #e7b35a;
      --proa-attention-ink: #f0c26e;
      --proa-attention-soft: #33270f;
      --proa-attention-wash: #1f1c14;
      --proa-attention-line: #5a4519;
      --proa-negative: #f5949d;
      --proa-negative-soft: #3a1d22;
      --proa-negative-line: #5e2f36;
      --proa-info: #7fb0e6;
      --proa-info-soft: #172a40;
      --proa-info-line: #2a4566;
      --proa-service-finance: #d9b45f;
      --proa-service-legal: #7fa3d9;
      --proa-service-accounting: #8fae8d;
      --proa-bubble-start: rgba(72,145,151,.16);
      --proa-bubble-end: rgba(72,145,151,.1);
      --proa-bubble-line: rgba(72,145,151,.28);
      --proa-notice: var(--proa-color-slate-100);
      --proa-on-notice: var(--proa-color-slate-900);
      --proa-scrim: rgba(0,0,0,.45);
      --proa-scrim-nav: rgba(0,0,0,.5);

      /* PROA Foundations rev. 03: shadows (dark). */
      --proa-shadow-control: inset 0 1px #ffffff0d, 0 1px 2px #00000033;
      --proa-shadow-sheet: 0 12px 32px #00000040, 0 1px 3px #00000033;
      --proa-shadow-float: 0 18px 48px #00000066, 0 3px 9px #00000040;
      --proa-shadow-frame: 0 30px 60px -20px #00000080, 0 6px 18px #00000040;

      /* Base semantic tokens whose dark reference differs. */
      --proa-text-link: var(--proa-accent-dark-text-link, var(--proa-accent-text));
      --proa-focus: var(--proa-accent-dark-focus, var(--proa-color-teal-400));
      --proa-action-primary-bg: var(--proa-accent-dark-action-primary-bg, var(--proa-color-orange-600));
      --proa-action-primary-fg: var(--proa-accent-dark-action-primary-fg, #ffffff);
      --proa-action-primary-hover-bg: var(--proa-accent-dark-action-primary-hover-bg, var(--proa-color-orange-700));
      --proa-action-primary-active-bg: var(--proa-accent-dark-action-primary-active-bg, var(--proa-color-orange-800));
      /* PF accent-soft composited on the dark surface: measured colors must be opaque. */
      --proa-action-selected-bg: var(--proa-accent-dark-action-selected-bg, #223b40);
      --proa-action-selected-fg: var(--proa-accent-dark-action-selected-fg, var(--proa-accent-text));
      --proa-action-danger-fg: var(--proa-color-slate-950);
      --proa-action-danger-hover-bg: #f7a4ac;
      --proa-action-danger-active-bg: #f8b4ba;
      --proa-loading-accent: var(--proa-accent);
    }
  }

  :root[data-proa-theme="light"] { color-scheme: light; }

  :root[data-proa-theme="dark"] {
    color-scheme: dark;
    /* PROA Foundations rev. 03: roles (dark). */
    --proa-canvas: var(--proa-color-slate-950);
    --proa-frame: var(--proa-color-slate-950);
    --proa-canvas-glow: rgba(72,145,151,.06);
    --proa-surface: var(--proa-color-slate-900);
    --proa-surface-muted: #1d2b2f;
    --proa-surface-raised: var(--proa-color-slate-800);
    --proa-surface-hover: #2a3a3e;
    --proa-surface-glass: rgba(36,50,54,.96);
    --proa-chrome-start: var(--proa-color-slate-700);
    --proa-chrome-end: var(--proa-color-slate-900);
    --proa-chrome-bar: rgba(24,38,42,.72);
    --proa-chrome-solid: var(--proa-color-slate-800);
    --proa-line: var(--proa-color-slate-700);
    --proa-line-soft: #263539;
    --proa-line-button: var(--proa-color-slate-600);
    --proa-line-hover: var(--proa-color-slate-500);
    --proa-line-strong: var(--proa-color-slate-600);
    --proa-line-control: var(--proa-color-slate-500);
    --proa-ink: var(--proa-color-slate-100);
    --proa-ink-title: var(--proa-color-slate-100);
    --proa-ink-label: var(--proa-color-slate-200);
    --proa-ink-body: var(--proa-color-slate-300);
    --proa-ink-muted: var(--proa-color-slate-300);
    --proa-ink-inverse: var(--proa-color-slate-950);
    --proa-accent: var(--proa-color-teal-400);
    --proa-accent-strong: var(--proa-color-teal-400);
    --proa-accent-text: var(--proa-color-teal-300);
    --proa-accent-soft: rgba(72,145,151,.2);
    --proa-accent-line: rgba(72,145,151,.36);
    --proa-brand-soft: rgba(241,88,46,.16);
    --proa-brand-line: rgba(241,88,46,.32);
    --proa-brand-text: var(--proa-color-orange-300);
    --proa-glass-fill: rgba(255,255,255,.035);
    --proa-glass-line: rgba(255,255,255,.09);
    --proa-meter-fill: var(--proa-color-teal-400);
    --proa-meter-empty: var(--proa-color-slate-700);
    --proa-control-dark: var(--proa-color-slate-100);
    --proa-on-control-dark: var(--proa-color-slate-700);
    --proa-positive: #5cc08a;
    --proa-positive-soft: #15301f;
    --proa-positive-line: #24503a;
    --proa-attention: #e7b35a;
    --proa-attention-ink: #f0c26e;
    --proa-attention-soft: #33270f;
    --proa-attention-wash: #1f1c14;
    --proa-attention-line: #5a4519;
    --proa-negative: #f5949d;
    --proa-negative-soft: #3a1d22;
    --proa-negative-line: #5e2f36;
    --proa-info: #7fb0e6;
    --proa-info-soft: #172a40;
    --proa-info-line: #2a4566;
    --proa-service-finance: #d9b45f;
    --proa-service-legal: #7fa3d9;
    --proa-service-accounting: #8fae8d;
    --proa-bubble-start: rgba(72,145,151,.16);
    --proa-bubble-end: rgba(72,145,151,.1);
    --proa-bubble-line: rgba(72,145,151,.28);
    --proa-notice: var(--proa-color-slate-100);
    --proa-on-notice: var(--proa-color-slate-900);
    --proa-scrim: rgba(0,0,0,.45);
    --proa-scrim-nav: rgba(0,0,0,.5);

    /* PROA Foundations rev. 03: shadows (dark). */
    --proa-shadow-control: inset 0 1px #ffffff0d, 0 1px 2px #00000033;
    --proa-shadow-sheet: 0 12px 32px #00000040, 0 1px 3px #00000033;
    --proa-shadow-float: 0 18px 48px #00000066, 0 3px 9px #00000040;
    --proa-shadow-frame: 0 30px 60px -20px #00000080, 0 6px 18px #00000040;

    /* Base semantic tokens whose dark reference differs. */
    --proa-text-link: var(--proa-accent-dark-text-link, var(--proa-accent-text));
    --proa-focus: var(--proa-accent-dark-focus, var(--proa-color-teal-400));
    --proa-action-primary-bg: var(--proa-accent-dark-action-primary-bg, var(--proa-color-orange-600));
    --proa-action-primary-fg: var(--proa-accent-dark-action-primary-fg, #ffffff);
    --proa-action-primary-hover-bg: var(--proa-accent-dark-action-primary-hover-bg, var(--proa-color-orange-700));
    --proa-action-primary-active-bg: var(--proa-accent-dark-action-primary-active-bg, var(--proa-color-orange-800));
    /* PF accent-soft composited on the dark surface: measured colors must be opaque. */
    --proa-action-selected-bg: var(--proa-accent-dark-action-selected-bg, #223b40);
    --proa-action-selected-fg: var(--proa-accent-dark-action-selected-fg, var(--proa-accent-text));
    --proa-action-danger-fg: var(--proa-color-slate-950);
    --proa-action-danger-hover-bg: #f7a4ac;
    --proa-action-danger-active-bg: #f8b4ba;
    --proa-loading-accent: var(--proa-accent);
  }
}

/* The isolated Google frame (REQ-GWS-002). core-shell serves Base UI's
   tokens ahead of these rules. The frame sits on the Shell's rail, which is
   dark slate in every theme, so it uses the same Base primitives. */
html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--proa-font-sans);
  font-size: 12px;
  color: var(--proa-color-slate-100);
}
/* Two fixed rows on the Shell's dark rail: a status line, then one control. */
.row {
  display: grid;
  grid-template-rows: 16px auto;
  gap: 6px;
  padding: 2px;
  box-sizing: border-box;
}
.status {
  color: var(--proa-color-slate-300);
  font-size: 11px;
  line-height: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status--connected::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: var(--proa-color-teal-400);
  vertical-align: middle;
}
button {
  font: inherit;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--proa-size-control);
  padding: 0 11px;
  border: 1px solid var(--proa-color-slate-400);
  border-radius: var(--proa-radius-control);
  color: var(--proa-color-slate-100);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button:hover:not([aria-disabled="true"]) { background: var(--proa-color-slate-800); }
button:focus-visible { outline: 2px solid var(--proa-color-teal-400); outline-offset: 1px; }
button[aria-disabled="true"] { cursor: default; opacity: .6; }
button.primary {
  color: var(--proa-color-slate-950);
  background: var(--proa-color-teal-400);
  border-color: var(--proa-color-teal-400);
}
button.primary:hover:not([aria-disabled="true"]) { background: var(--proa-color-teal-300); }