/**
 * Seeds Design System - Combined Component CSS
 * Auto-generated — do not edit directly.
 *
 * Provides pre-built component classes (seeds-btn, etc.) using Seeds CSS
 * custom properties. Import alongside theme-all.css:
 *
 *   import "@sproutsocial/seeds-react-theme/css/theme-all";
 *   import "@sproutsocial/racine/css/components";
 *
 * @see https://github.com/sproutsocial/seeds
 */

/* --- seeds-react-accordion --- */
/**
 * Seeds Accordion component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * These classes mirror the styled-components implementation in styles.ts so the
 * Tailwind and styled-components rendering paths are visually identical. The
 * `[data-styled="true"]` rules deliver the bordered "card" appearance when the
 * accordion is rendered with `styled` enabled.
 *
 * Rules live in the Tailwind `components` layer so consumer utility classes
 * (e.g. `mx-200`, `p-300`, `inline-flex`) win the cascade and can override the
 * component's own styles. Keyframes are at-rules unaffected by layering and stay
 * outside the `@layer` wrapper.
 *
 * Usage:
 *   <div class="accordion-item">
 *     <div class="seeds-accordion-trigger" data-styled="true">…</div>
 *     <div class="seeds-accordion-content" data-styled="true">
 *       <div class="seeds-accordion-content-inner" data-styled="true">…</div>
 *     </div>
 *   </div>
 */

/* Keyframes are prefixed to avoid collisions in the aggregated stylesheet
   (styled-components previously scoped slideDown/slideUp per component). */
@keyframes seeds-accordion-slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes seeds-accordion-slideUp {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

@layer components {
  /* TriggerContainer -> .seeds-accordion-trigger */
  .seeds-accordion-trigger {
    display: flex;
    align-items: center;
    color: var(--color-text-body);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
  }

  /* Override Text.Headline styles to match original accordion trigger typography */
  .seeds-accordion-trigger h1,
  .seeds-accordion-trigger h2,
  .seeds-accordion-trigger h3,
  .seeds-accordion-trigger h4,
  .seeds-accordion-trigger h5,
  .seeds-accordion-trigger h6 {
    font-size: inherit;
    font-weight: normal;
    line-height: inherit;
    color: inherit;
  }

  .seeds-accordion-trigger[data-styled="true"] h1,
  .seeds-accordion-trigger[data-styled="true"] h2,
  .seeds-accordion-trigger[data-styled="true"] h3,
  .seeds-accordion-trigger[data-styled="true"] h4,
  .seeds-accordion-trigger[data-styled="true"] h5,
  .seeds-accordion-trigger[data-styled="true"] h6 {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-headline);
  }

  .seeds-accordion-trigger[data-styled="true"] {
    border-top: 1px solid var(--color-container-border-base);
    border-left: 1px solid var(--color-container-border-base);
    border-right: 1px solid var(--color-container-border-base);
    background: var(--color-container-bg-base);
  }

  .accordion-item[data-state="open"]
    .seeds-accordion-trigger[data-styled="true"] {
    border-bottom: 1px solid transparent;
  }

  .accordion-item[data-state="closed"]
    .seeds-accordion-trigger[data-styled="true"] {
    transition: border-bottom-color 0s ease-in-out 0.3s;
    border-bottom: 1px solid transparent;
  }

  .accordion-item:first-child .seeds-accordion-trigger[data-styled="true"] {
    border-top-left-radius: var(--radius-outer);
    border-top-right-radius: var(--radius-outer);
  }

  .accordion-item:last-child[data-state="closed"]
    .seeds-accordion-trigger[data-styled="true"] {
    transition: border-radius 0s linear 0.3s,
      border-bottom-color 0s ease-in-out 0.3s;
    border-bottom: 1px solid var(--color-container-border-base);
    border-bottom-left-radius: var(--radius-outer);
    border-bottom-right-radius: var(--radius-outer);
  }

  /* StyledRadixAccordionContent -> .seeds-accordion-content */
  .seeds-accordion-content {
    overflow: hidden;
  }

  .seeds-accordion-content[data-state="open"] {
    animation: seeds-accordion-slideDown 300ms ease-in-out;
  }

  .seeds-accordion-content[data-state="closed"] {
    animation: seeds-accordion-slideUp 300ms ease-in-out;
  }

  .seeds-accordion-content[data-styled="true"] {
    border-left: 1px solid var(--color-container-border-base);
    border-right: 1px solid var(--color-container-border-base);
    background: var(--color-container-bg-base);
  }

  .accordion-item:last-child[data-state="open"]
    .seeds-accordion-content[data-styled="true"],
  .accordion-item:last-child[data-state="closed"]
    .seeds-accordion-content[data-styled="true"] {
    border-bottom: 1px solid var(--color-container-border-base);
    border-bottom-left-radius: var(--radius-outer);
    border-bottom-right-radius: var(--radius-outer);
  }

  /* ContentContainer -> .seeds-accordion-content-inner */
  .seeds-accordion-content-inner {
    color: var(--color-text-body);
    background: transparent;
    font-family: var(--font-family);
  }

  .seeds-accordion-content-inner[data-styled="true"] {
    padding: 0 var(--space-400) var(--space-400);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
  }

  .accordion-item:last-child[data-state="open"]
    .seeds-accordion-content-inner[data-styled="true"],
  .accordion-item:last-child[data-state="closed"]
    .seeds-accordion-content-inner[data-styled="true"] {
    border-bottom-left-radius: var(--radius-outer);
    border-bottom-right-radius: var(--radius-outer);
  }
}

/* --- seeds-react-avatar --- */
/**
 * Seeds Avatar component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-avatar seeds-avatar-circle seeds-avatar-neutral" style="--seeds-avatar-size: 40px">JD</div>
 *
 * The avatar size is driven by the --seeds-avatar-size custom property set
 * inline by the component from its `size` prop.
 *
 * Rules live in `@layer components` so that consumer Tailwind utilities
 * (e.g. `mx-200`, `p-300`, `inline-flex`) win in the cascade and can override
 * these component styles, rather than tying/beating them on specificity.
 */

@layer components {
  .seeds-avatar {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: var(--seeds-avatar-size);
    height: var(--seeds-avatar-size);
    background: none;
    border: none;
  }

  .seeds-avatar-circle {
    border-radius: 50%;
  }

  .seeds-avatar-leaf {
    border-radius: 40% 0 40% 0;
  }

  /* Per-type text color, inherited by the initials Text (Text sets no default color). */
  .seeds-avatar-neutral {
    color: var(--color-text-decorative-neutral);
  }

  .seeds-avatar-purple {
    color: var(--color-text-decorative-purple);
  }

  .seeds-avatar-green {
    color: var(--color-text-decorative-green);
  }

  .seeds-avatar-blue {
    color: var(--color-text-decorative-blue);
  }

  .seeds-avatar-yellow {
    color: var(--color-text-decorative-yellow);
  }

  .seeds-avatar-red {
    color: var(--color-text-decorative-red);
  }

  .seeds-avatar-orange {
    color: var(--color-text-decorative-orange);
  }

  /*
   * Fallback (initials shown): 1px border + decorative background.
   * Type-specific bg/border-color are scoped to .seeds-avatar-fallback so the
   * image variant keeps background:none / border:none.
   */
  .seeds-avatar-fallback {
    border: 1px solid;
  }

  .seeds-avatar-fallback.seeds-avatar-neutral {
    background: var(--color-container-bg-decorative-neutral);
    border-color: var(--color-container-border-decorative-neutral);
  }

  .seeds-avatar-fallback.seeds-avatar-purple {
    background: var(--color-container-bg-decorative-purple);
    border-color: var(--color-container-border-decorative-purple);
  }

  .seeds-avatar-fallback.seeds-avatar-green {
    background: var(--color-container-bg-decorative-green);
    border-color: var(--color-container-border-decorative-green);
  }

  .seeds-avatar-fallback.seeds-avatar-blue {
    background: var(--color-container-bg-decorative-blue);
    border-color: var(--color-container-border-decorative-blue);
  }

  .seeds-avatar-fallback.seeds-avatar-yellow {
    background: var(--color-container-bg-decorative-yellow);
    border-color: var(--color-container-border-decorative-yellow);
  }

  .seeds-avatar-fallback.seeds-avatar-red {
    background: var(--color-container-bg-decorative-red);
    border-color: var(--color-container-border-decorative-red);
  }

  .seeds-avatar-fallback.seeds-avatar-orange {
    background: var(--color-container-bg-decorative-orange);
    border-color: var(--color-container-border-decorative-orange);
  }
}

/* --- seeds-react-badge --- */
/**
 * Seeds Badge component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * All rules are wrapped in `@layer components` so that consumer Tailwind
 * utilities (unlayered) win the cascade over these styles.
 */

@layer components {
  .seeds-badge {
    font-family: var(--font-family);
    border-radius: 9999px;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-body);
  }

  .seeds-badge-sm {
    font-size: var(--font-size-100);
    padding: var(--space-0) var(--space-200);
  }

  .seeds-badge-lg {
    font-size: var(--font-size-200);
    padding: var(--space-300);
  }

  .seeds-badge-green {
    background: var(--color-container-bg-decorative-green);
  }

  .seeds-badge-blue {
    background: var(--color-container-bg-decorative-blue);
  }

  .seeds-badge-purple {
    background: var(--color-container-bg-decorative-purple);
  }

  .seeds-badge-yellow {
    background: var(--color-container-bg-decorative-yellow);
  }

  .seeds-badge-orange {
    background: var(--color-container-bg-decorative-orange);
  }

  .seeds-badge-red {
    background: var(--color-container-bg-decorative-red);
  }

  .seeds-badge-neutral {
    background: var(--color-container-bg-decorative-neutral);
  }

  .seeds-badge-magenta {
    background: var(--color-container-bg-decorative-magenta);
  }

  .seeds-badge-pink {
    background: var(--color-container-bg-decorative-pink);
  }

  .seeds-badge-aqua {
    background: var(--color-container-bg-decorative-aqua);
  }

  .seeds-badge-teal {
    background: var(--color-container-bg-decorative-teal);
  }
}

/* --- seeds-react-banner --- */
/**
 * Seeds Banner component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Rules live in the Tailwind `components` layer so consumer utility classes
 * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
 */

@layer components {
  .seeds-banner {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-body);
    border-radius: var(--radius-outer);
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    padding: var(--space-300);
  }

  .seeds-banner a,
  .seeds-banner button {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    font-size: inherit;
  }

  .seeds-banner a:hover,
  .seeds-banner button:hover {
    color: var(--color-text-body);
    text-decoration: underline;
  }

  .seeds-banner > span:not(.Icon) {
    display: block;
  }

  .seeds-banner-icon {
    align-self: flex-start;
    min-width: 16px;
  }

  .seeds-banner-ghost {
    border: 1px solid var(--color-container-border-base);
    background-color: var(--color-container-bg-base);
  }

  .seeds-banner-success {
    border: 1px solid var(--color-container-border-success);
    background-color: var(--color-container-bg-success);
  }

  .seeds-banner-info {
    border: 1px solid var(--color-container-border-info);
    background-color: var(--color-container-bg-info);
  }

  .seeds-banner-error {
    border: 1px solid var(--color-container-border-error);
    background-color: var(--color-container-bg-error);
  }

  .seeds-banner-warning {
    border: 1px solid var(--color-container-border-warning);
    background-color: var(--color-container-bg-warning);
  }

  .seeds-banner-opportunity {
    border: 1px solid var(--color-container-border-opportunity);
    background-color: var(--color-container-bg-opportunity);
  }
}

/* --- seeds-react-breadcrumb --- */
/**
 * Seeds Breadcrumb component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * All rules are wrapped in `@layer components` so that consumer Tailwind
 * utilities (unlayered) win the cascade over these styles.
 */

@layer components {
  .seeds-breadcrumb ol {
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    margin: 0;
    font-family: var(--font-family);
    padding: 0;
    display: flex;
  }

  .seeds-breadcrumb li {
    margin-right: var(--space-200);
    display: flex;
  }

  .seeds-breadcrumb a,
  .seeds-breadcrumb button {
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seeds-breadcrumb ol > div + li::before {
    content: "/";
    margin-right: var(--space-200);
  }

  .seeds-breadcrumb li:last-child a,
  .seeds-breadcrumb li:last-child button {
    color: var(--color-text-body);
    font-weight: bold;
  }

  .seeds-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--color-text-body);
    margin-left: var(--space-200);
  }
}

/* --- seeds-react-button --- */
/**
 * Seeds Button component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <button class="seeds-btn seeds-btn-primary">Click me</button>
 *   <button class="seeds-btn seeds-btn-primary seeds-btn-lg">Large</button>
 *   <button class="seeds-btn seeds-btn-primary seeds-btn-disabled" aria-disabled="true">Disabled</button>
 *
 * Use aria-disabled, not the HTML disabled attribute — .seeds-btn-disabled
 * intentionally omits pointer-events: none so hover/cursor feedback still
 * reaches the element; a real disabled attribute would suppress those events
 * regardless of this class.
 *
 * All rules are wrapped in `@layer components` so that:
 * 1. Consumer Tailwind utilities (unlayered) win the cascade over these styles.
 * 2. Other component CSS also in `@layer components` (e.g. tabs.css) can
 *    override button base styles by appearing later in source order, without
 *    needing higher specificity.
 */

@layer components {
  .seeds-btn {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--font-family);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-500);
    cursor: pointer;
    text-decoration: none;
    /* Matches Icon's default line height, and the overall height of Input and
     Select. Absolute, not 1rem, so a host app's root font-size can't shift it. */
    line-height: 16px;
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    transition-property: all;
    transition-duration: var(--duration-fast);
    transition-timing-function: linear;
    margin: 0;
    padding: var(--space-300);
    font-size: var(--font-size-200);
  }

  .seeds-btn:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0 0 4px
        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
  }

  /* Firefox draws its own inner focus border on buttons; suppress it so only the
   box-shadow ring above shows. */
  .seeds-btn::-moz-focus-inner {
    border: 0;
  }

  /* Clear the focus ring once the pointer is over the button or it is being
   pressed, so the ring reads as keyboard-only feedback. Appearances that want a
   shadow on hover (placeholder, pill) re-declare box-shadow at equal specificity
   later in this file and win on source order. */
  .seeds-btn:hover {
    box-shadow: none;
    /* Re-asserted on hover so a later `a:hover` rule in this layer cannot
     underline a link-rendered button. */
    text-decoration: none;
  }

  .seeds-btn:focus:active {
    box-shadow: none;
  }

  /**
   * Icon defaults to `vertical-align: middle`, which sits an icon slightly high
   * against a bold button label. Pin it to the text baseline instead.
   *
   * Targets `.Icon` because both Icon render paths carry that class. Note this
   * only reaches the Tailwind Icon: an Icon given `color` or system props routes
   * to the styled-components path, whose unlayered styles outrank anything in
   * `@layer components` regardless of specificity. That gap closes when Icon
   * drops its styled-components path.
   */
  .seeds-btn .Icon {
    vertical-align: text-bottom;
  }

  /* KNOWN ISSUE: `small` currently renders identically to the default size — both use
   --space-300 / --font-size-200 (only --lg differs). So size="small" has no visual
   effect for ANY appearance. A real fix needs distinct small tokens confirmed against
   Figma (24px target); left out of scope intentionally. */
  .seeds-btn-sm {
    padding: var(--space-300);
    font-size: var(--font-size-200);
  }

  .seeds-btn-lg {
    padding: var(--space-350);
    font-size: var(--font-size-300);
  }

  .seeds-btn-fullwidth {
    width: 100%;
    white-space: normal;
  }

  .seeds-btn-primary {
    background-color: var(--color-button-primary-bg-base);
    color: var(--color-button-primary-text-base);
    border-color: var(--color-button-primary-border-base);
  }

  .seeds-btn-primary:hover {
    background-color: var(--color-button-primary-bg-hover);
    color: var(--color-button-primary-text-hover);
  }

  /* `:active` sets the hover text color as well as the active background. Without
   the color, a keyboard press (Space/Enter fires `:active` with no `:hover`) puts
   base-colored text on the active background. */
  .seeds-btn-primary:active {
    background-color: var(--color-button-primary-bg-active);
    color: var(--color-button-primary-text-hover);
  }

  .seeds-btn-secondary {
    background-color: var(--color-button-secondary-bg-base);
    color: var(--color-button-secondary-text-base);
    border-color: var(--color-button-secondary-border-base);
  }

  .seeds-btn-secondary:hover {
    background-color: var(--color-button-secondary-bg-hover);
    color: var(--color-button-secondary-text-hover);
  }

  .seeds-btn-secondary:active {
    background-color: var(--color-button-secondary-bg-active);
    color: var(--color-button-secondary-text-hover);
  }

  .seeds-btn-destructive {
    background-color: var(--color-button-destructive-bg-base);
    color: var(--color-button-destructive-text-base);
    border-color: var(--color-button-destructive-border-base);
  }

  .seeds-btn-destructive:hover {
    background-color: var(--color-button-destructive-bg-hover);
    color: var(--color-button-destructive-text-hover);
  }

  .seeds-btn-destructive:active {
    background-color: var(--color-button-destructive-bg-active);
    color: var(--color-button-destructive-text-hover);
  }

  .seeds-btn-placeholder {
    background-color: var(--color-button-placeholder-bg-base);
    color: var(--color-button-placeholder-text-base);
    border-color: var(--color-button-placeholder-border-base);
    border-style: dashed;
  }

  /* Placeholder is the one appearance that lifts on hover instead of clearing its
   shadow. Declared after `.seeds-btn:hover` so it wins on source order. */
  .seeds-btn-placeholder:hover {
    background-color: var(--color-button-placeholder-bg-hover);
    color: var(--color-button-placeholder-text-hover);
    box-shadow: var(--shadow-low);
  }

  .seeds-btn-placeholder:active {
    background-color: var(--color-button-placeholder-bg-active);
    color: var(--color-button-placeholder-text-hover);
  }

  .seeds-btn-unstyled {
    background-color: var(--color-button-unstyled-bg-base);
    color: var(--color-button-unstyled-text-base);
    border-color: transparent;
  }

  .seeds-btn-unstyled:hover {
    color: var(--color-button-unstyled-text-hover);
  }

  /* unstyled has no active background token, so only the text color changes */
  .seeds-btn-unstyled:active {
    color: var(--color-button-unstyled-text-hover);
  }

  /* AI brand appearances — built on the shared --color-gradient-ai* tokens.
   Rendered only via this Tailwind/CSS path (see ButtonHybrid routing guard). */
  .seeds-btn-ai-primary {
    background-color: transparent;
    background-image: var(--color-button-ai-primary-bg-base);
    /* Cover the full border box (incl. the base 1px transparent border) and don't
     tile — otherwise the gradient repeats as a 1px strip along each edge. */
    background-origin: border-box;
    background-repeat: no-repeat;
    color: var(--color-button-ai-primary-text-base);
    border-color: transparent;
  }

  .seeds-btn-ai-secondary {
    /* The base surface shows through the 20% gradient tint to produce the soft
     fill. Uses the themed container surface (white in light, dark surface in
     dark mode) so the tint composites correctly in both modes. */
    background-color: var(--color-container-bg-base);
    background-image: var(--color-button-ai-secondary-bg-base);
    background-origin: border-box;
    background-repeat: no-repeat;
    color: var(--color-button-ai-secondary-text-base);
    border-color: transparent;
  }

  .seeds-btn-ai-outline {
    position: relative;
    background-color: transparent;
    color: var(--color-button-ai-outline-text-base);
    border-color: transparent;
  }

  /* Rounded gradient border via a masked ::before so it respects border-radius
   and does not tint the label/icon. */
  .seeds-btn-ai-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--color-gradient-ai);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* Subtle, brand-consistent hover across all three AI appearances. */
  .seeds-btn-ai-primary:hover,
  .seeds-btn-ai-secondary:hover,
  .seeds-btn-ai-outline:hover {
    filter: brightness(0.96);
  }

  /* Active (sustained selected) state — mirrors styled-components: hover text color + active background */
  .seeds-btn-primary.seeds-btn-active {
    color: var(--color-button-primary-text-hover);
    background-color: var(--color-button-primary-bg-active);
  }

  .seeds-btn-secondary.seeds-btn-active {
    color: var(--color-button-secondary-text-hover);
    background-color: var(--color-button-secondary-bg-active);
  }

  .seeds-btn-destructive.seeds-btn-active {
    color: var(--color-button-destructive-text-hover);
    background-color: var(--color-button-destructive-bg-active);
  }

  .seeds-btn-placeholder.seeds-btn-active {
    color: var(--color-button-placeholder-text-hover);
    background-color: var(--color-button-placeholder-bg-active);
  }

  /* unstyled active: only text color changes (no background token) */
  .seeds-btn-unstyled.seeds-btn-active {
    color: var(--color-button-unstyled-text-hover);
  }

  /**
   * `.seeds-interactive-disabled` is a pure-CSS mixin for disabling interactive
   * elements (buttons, links, controls) that use `aria-disabled="true"` instead
   * of the HTML `disabled` attribute — the CSS equivalent of the
   * `interactiveDisabled` styled-components mixin in `@sproutsocial/seeds-react-mixins`
   * (now deprecated in favor of this). Grouped into the same rule as
   * `.seeds-btn-disabled` so there's one declaration to keep in sync, not two.
   *
   * Intentionally omits `pointer-events: none` so click events still reach the
   * element's JS handler, where they can be suppressed and optionally used to
   * show feedback (e.g. a tooltip). Any other pure-CSS component with the same
   * aria-disabled pattern can adopt `.seeds-interactive-disabled` directly.
   */
  .seeds-interactive-disabled,
  .seeds-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .seeds-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    /* Keeps the base 1px border and just recolors it (the token is transparent),
     rather than removing it. `border: none` zeroed the width, growing the content
     box 2px on each axis relative to every other appearance. */
    border-color: var(--color-button-pill-border-base);
    border-radius: var(--radius-pill);
    min-width: var(--space-600);
    min-height: var(--space-600);
    padding: var(--space-300);
    color: var(--color-button-pill-text-base);
  }

  .seeds-btn-pill:hover,
  .seeds-btn-pill:focus:active {
    background-color: transparent;
    color: var(--color-button-pill-text-hover);
    box-shadow: inset 0px 0px 0px 1px var(--color-button-pill-border-hover);
  }

  .seeds-btn-pill.seeds-btn-active {
    color: var(--color-button-pill-text-hover);
    background-color: var(--color-button-pill-bg-active);
  }
}

/* end @layer components */

/* --- seeds-react-card --- */
/**
 * Seeds Card component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-card seeds-card-interactive" style="--seeds-card-hover-shadow: var(--shadow-low)">…</div>
 *
 * The per-elevation hover shadow is driven by the --seeds-card-hover-shadow
 * custom property set inline by the component from its `elevation` prop.
 *
 * Rules live in `@layer components` so that consumer Tailwind utilities
 * (e.g. mx-200, p-300, ml-300) win in the cascade and can override these
 * component styles, rather than tying/beating them on specificity.
 */

@layer components {
  .seeds-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    background: var(--color-container-bg-base);
    /* borderWidths[500] resolves to 1px; no --border-width var is emitted. */
    border: 1px solid var(--color-container-border-base);
    padding: var(--space-400);
    border-radius: var(--radius-outer);
    transition: box-shadow var(--duration-medium),
      border var(--duration-medium);
  }

  /* Compositional cards (using CardHeader/Content/Footer) drop their own padding. */
  .seeds-card-compositional {
    padding: 0;
  }

  .seeds-card-interactive {
    cursor: pointer;
  }

  .seeds-card-interactive:hover {
    box-shadow: var(--seeds-card-hover-shadow);
  }

  /* focusRing mixin: button/checkbox cards focus directly; link cards show the
     ring via :focus-within when their inner link is focused. The :focus-within
     ring is scoped to link-role cards only (matching StyledCard's $isRoleLink
     gating), so button/checkbox cards do not show the ring on descendant focus. */
  .seeds-card:focus,
  .seeds-card-link-role:focus-within {
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0px 0px 4px
        color-mix(
          in srgb,
          var(--color-button-primary-bg-base),
          transparent 70%
        );
    outline: none;
  }

  .seeds-card::-moz-focus-inner {
    border: 0;
  }

  /* The inner link resets its own focus styling; the card shows the ring. */
  .seeds-card-link-role:focus-within .seeds-card-link:focus {
    border: none;
    box-shadow: none;
    outline: none;
  }

  /* disabled mixin */
  .seeds-card-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .seeds-card-selected {
    border: 1px solid var(--color-container-border-selected);
  }

  /* Sub-components ------------------------------------------------------ */

  .seeds-card-content {
    display: flex;
    flex-direction: column;
    padding: var(--space-400);
    box-sizing: border-box;
  }

  .seeds-card-header {
    display: flex;
    flex-direction: row;
    padding: var(--space-400);
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-container-border-base);
    border-top-left-radius: var(--radius-inner);
    border-top-right-radius: var(--radius-inner);
  }

  .seeds-card-footer {
    display: flex;
    flex-direction: row;
    padding: var(--space-400);
    box-sizing: border-box;
    border-top: 1px solid var(--color-container-border-base);
    border-bottom-left-radius: var(--radius-inner);
    border-bottom-right-radius: var(--radius-inner);
  }

  /* Link typography: font-family + bold + headline color + type scale 400. */
  .seeds-card-link {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-headline);
    font-size: var(--font-size-400);
    line-height: var(--line-height-400);
  }

  /* Selected-icon overlay (positioned top-right, fades in when selected). */
  .seeds-card-selected-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -8px;
    right: -8px;
  }

  .seeds-card-selected-icon {
    border-radius: 50%;
    background: var(--color-container-bg-base);
    opacity: 0;
    transition: opacity var(--duration-medium);
  }

  .seeds-card-selected-icon-visible {
    opacity: 1;
  }

  /* Affordance icon slides right on card hover (mirrors StyledCardAffordance). */
  .seeds-card-affordance {
    transition: var(--duration-medium);
  }

  .seeds-card:hover .seeds-card-affordance {
    transform: translateX(var(--space-200));
  }
}

/* --- seeds-react-character-counter --- */
/**
 * Seeds CharacterCounter component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-character-counter" role="status">5</div>
 *
 * Rules live in `@layer components` so that consumer Tailwind utilities
 * (e.g. `mx-200`, `p-300`) win in the cascade and can override these component
 * styles, rather than tying/beating them on specificity.
 */

@layer components {
  .seeds-character-counter {
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: 1;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-subtext);
  }

  .seeds-character-counter-mini {
    font-size: var(--font-size-100);
  }

  .seeds-character-counter-overlimit {
    color: var(--color-text-error);
  }
}

/* --- seeds-react-chat-bubble --- */
/**
 * Seeds ChatBubble component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * All rules are wrapped in `@layer components` so that consumer Tailwind
 * utilities (unlayered) win the cascade over these styles.
 */

@layer components {
  .seeds-chat-bubble {
    font-family: var(--font-family);
    display: inline-flex;
    align-items: center;
    max-width: 80%;
    word-break: break-word;
  }

  .seeds-chat-bubble-default {
    font-size: var(--font-size-300);
    line-height: var(--line-height-300);
    padding: var(--space-300) var(--space-400);
  }

  .seeds-chat-bubble-small {
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    padding: var(--space-200) var(--space-300);
  }

  .seeds-chat-bubble-sent {
    align-self: flex-end;
    color: var(--color-text-inverse);
    background: var(--color-button-primary-bg-base);
  }

  .seeds-chat-bubble-received {
    align-self: flex-start;
    color: var(--color-text-body);
    background: var(--color-container-bg-decorative-blue);
  }

  .seeds-chat-bubble-sent.seeds-chat-bubble-default {
    border-radius: 16px 16px 0px 16px;
  }

  .seeds-chat-bubble-received.seeds-chat-bubble-default {
    border-radius: 16px 16px 16px 0px;
  }

  .seeds-chat-bubble-sent.seeds-chat-bubble-small {
    border-radius: 12px 12px 0px 12px;
  }

  .seeds-chat-bubble-received.seeds-chat-bubble-small {
    border-radius: 12px 12px 12px 0px;
  }
}

/* --- seeds-react-collapsible --- */
/**
 * Seeds Collapsible component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Open/closed state is driven by Radix's data-state attribute on the panel.
 *
 * Usage:
 *   <div class="seeds-collapsible-content" data-state="open">…</div>
 */

/* @keyframes are not subject to cascade layers; keep them outside @layer so
   they stay resolvable by name from the layered animation rules below. */
@keyframes collapsibleSlideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes collapsibleSlideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

@layer components {
  .seeds-collapsible-content {
    overflow: hidden;
  }

  .seeds-collapsible-content[data-state="open"] {
    animation: collapsibleSlideDown 300ms ease-in-out;
  }

  .seeds-collapsible-content[data-state="closed"] {
    animation: collapsibleSlideUp 300ms ease-in-out;
  }
}

/* --- seeds-react-container --- */
/**
 * Seeds Container component class. Mirrors the container mixin from
 * @sproutsocial/seeds-react-mixins.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * All rules are wrapped in @layer components so that consumer Tailwind
 * utilities (unlayered) win the cascade over these styles.
 */

@layer components {
  .seeds-container {
    background: var(--color-container-bg-base);
    border: 1px solid var(--color-container-border-base);
    border-radius: var(--radius-outer);
  }
}

/* --- seeds-react-content-block --- */
/**
 * Seeds ContentBlock component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-content-block-footer">...</div>
 */

@layer components {
  .seeds-content-block {
    background: var(--color-container-bg-base);
    border: 1px solid var(--color-container-border-base);
    border-radius: var(--radius-outer);
  }

  .seeds-content-block-content {
    padding: var(--space-400);
  }

  .seeds-content-block-content.flush {
    padding: 0;
  }

  /* When there is no footer, the content node rounds the card's bottom corners. */
  .seeds-content-block-content.no-footer {
    border-bottom-left-radius: var(--radius-outer);
    border-bottom-right-radius: var(--radius-outer);
  }

  .seeds-content-block-loader {
    margin: var(--space-400) 0;
  }

  .seeds-content-block-footer {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-400);
    border-top: 1px solid var(--color-container-border-base);
    border-bottom-left-radius: var(--radius-outer);
    border-bottom-right-radius: var(--radius-outer);
  }
}

/* --- seeds-react-content-header --- */
/**
 * Seeds ContentHeader component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Rules live in the Tailwind `components` layer so consumer utility classes
 * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
 */

@layer components {
  .seeds-content-header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--color-text-headline);
    padding: var(--space-400);
  }

  .seeds-content-header-bordered {
    border-bottom: 1px solid var(--color-container-border-base);
  }

  /* Delay hiding the divider until the close animation finishes */
  .seeds-content-header:has(button[data-state="closed"]) {
    transition: border-bottom-color 0s ease-in-out 0.3s;
    border-bottom-color: transparent;
  }

  .seeds-content-header-trigger {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    width: 100%;
    cursor: pointer;
    min-width: 0;
  }

  .seeds-content-header-trigger .triggerIcon {
    flex-shrink: 0;
    transition: transform 300ms ease-in-out;
  }

  .seeds-content-header-trigger[data-state="open"] .triggerIcon {
    transform: rotate(-180deg);
  }

  .seeds-content-header-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0 0 4px
        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
  }
}

/* --- seeds-react-drawer --- */
/**
 * Seeds Drawer component classes.
 * Component-scoped port of the styled-components shell in styles.ts. Used by
 * DrawerTailwind.tsx on the Base UI primitives (Backdrop/Viewport/Popup).
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
 * CSS variable definitions (and dark mode support).
 *
 * Runtime numerics (z-index, and width/offset for side drawers) are applied as
 * inline styles on the popup, not here. The Base-UI-injected custom properties
 * (--drawer-snap-point-offset, --drawer-swipe-movement-y, --drawer-swipe-progress,
 * --nested-drawers, --drawer-height, --drawer-frontmost-height) arrive on the
 * popup at runtime and are read via var(...) below.
 *
 * All rules live in `@layer components` so Tailwind utilities (which the
 * Storybook/racine setup registers in the canonical theme/base/components/
 * utilities layer order) can override these component defaults. Unlayered
 * rules would outrank any layered utility per the CSS cascade-layers spec,
 * so utilities like `mx-200`/`p-300`/`inline-flex` passed via `className`
 * would otherwise have no effect on the popup. Inline-styled geometry
 * (width/offset/zIndex on the popup) is unaffected by layers and stays
 * non-overridable by design.
 */

@layer components {
  /* Viewport ---------------------------------------------------------------- */

  .seeds-drawer-viewport {
  }

  .seeds-drawer-viewport--snap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    touch-action: none;
    /* The viewport spans the whole screen but the popup only fills part of it.
       Letting clicks fall through the empty area means a nested snap-point drawer
       doesn't block selection/interaction with the parent drawer visible
       underneath. The popup re-enables events. */
    pointer-events: none;
  }

  /* Backdrop ---------------------------------------------------------------- */

  .seeds-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
  }

  /* Drag handle ------------------------------------------------------------- */

  .seeds-drawer-drag-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--color-container-border-base);
  }

  /* Popup base -------------------------------------------------------------- */

  .seeds-drawer-popup {
    display: flex;
    flex-direction: column;
    position: fixed;
    background-color: var(--color-container-bg-base);
    filter: blur(0);
    transition: transform var(--duration-medium) ease,
      border-radius var(--duration-medium) ease,
      height var(--duration-medium) ease;
  }

  /* Always-on opacity transition so content fades smoothly both into and out of
     stacked state. */
  .seeds-drawer-popup > * {
    transition: opacity var(--duration-medium) ease;
  }

  /* Side (left/right) layout. width + left/right come from inline style. */
  .seeds-drawer-popup--side {
    top: 0;
    height: 100%;
    box-shadow: var(--shadow-medium);
  }

  /* Bottom layout (non-snap bottom sheet). */
  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap) {
    --bleed: 3rem;
    --stack-scale: 1;
    --translate-y: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(90vh + var(--bleed));
    margin-bottom: calc(-1 * var(--bleed));
    border-radius: var(--radius-800) var(--radius-800) 0 0;
    transform: translateY(var(--translate-y)) scale(var(--stack-scale));
    transform-origin: 50% calc(100% - var(--bleed));
    box-shadow: 0px -8px 16px rgba(39, 51, 51, 0.25);
  }

  /* Bottom snap-points layout. Follows base-ui's reference layout. Critical:
     - box-sizing: border-box so offsetHeight ignores padding-bottom; otherwise
       base-ui's ResizeObserver feedback (padding-bottom driven by snap offset)
       grows popupHeight on every measurement and snap math diverges.
     - height (not max-height) so popupHeight is large enough that base-ui's snap
       offset = max(0, popupHeight - snapHeight) distinguishes snap points.
     - position: relative inside the flex-end Viewport so base-ui can measure
       popupHeight vs viewportHeight for snap math. */
  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: calc(100dvh - 1rem);
    padding-bottom: max(
      0px,
      calc(
        var(--drawer-snap-point-offset, 0px) +
          var(--drawer-swipe-movement-y, 0px)
      )
    );
    overflow: visible;
    touch-action: none;
    /* Counterpart to the viewport's pointer-events: none — the popup itself
       stays interactive. */
    pointer-events: auto;
    border-radius: var(--radius-800) var(--radius-800) 0 0;
    box-shadow: 0px -8px 16px rgba(39, 51, 51, 0.25);
    transform: translateY(
      calc(
        var(--drawer-snap-point-offset, 0px) +
          var(--drawer-swipe-movement-y, 0px)
      )
    );
    will-change: transform;
    transition: transform var(--duration-medium) cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow var(--duration-medium) cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Enter / exit ------------------------------------------------------------ */

  .seeds-drawer-popup--right[data-starting-style],
  .seeds-drawer-popup--right[data-ending-style] {
    transform: translateX(100%);
  }

  .seeds-drawer-popup--left[data-starting-style],
  .seeds-drawer-popup--left[data-ending-style] {
    transform: translateX(-100%);
  }

  .seeds-drawer-popup--bottom:not(
      .seeds-drawer-popup--snap
    )[data-starting-style],
  .seeds-drawer-popup--bottom:not(
      .seeds-drawer-popup--snap
    )[data-ending-style] {
    transform: translateY(calc(100% - var(--bleed) + 2px));
  }

  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap[data-starting-style],
  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap[data-ending-style] {
    transform: translateY(calc(100% + 2px));
    padding-bottom: 0;
  }

  /* The action rail lives above the popup (position: absolute, bottom: 100% +
     RAIL_OFFSET). Translating the popup by its own height alone leaves the rail
     visible at the bottom of the viewport during enter/exit, so we add the rail's
     outset: RAIL_BUTTON_HEIGHT (32) + RAIL_OFFSET (12) = 44px. */
  .seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
      .seeds-drawer-popup--snap
    )[data-starting-style],
  .seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
      .seeds-drawer-popup--snap
    )[data-ending-style] {
    transform: translateY(calc(100% - var(--bleed) + 2px + 44px));
  }

  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap.seeds-drawer-popup--action-rail[data-starting-style],
  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap.seeds-drawer-popup--action-rail[data-ending-style] {
    transform: translateY(calc(100% + 2px + 44px));
    padding-bottom: 0;
  }

  /* Swiping ----------------------------------------------------------------- */

  .seeds-drawer-popup[data-swiping],
  .seeds-drawer-popup[data-nested-drawer-swiping] {
    transition-duration: 0ms;
  }

  /* Nested drawer open ------------------------------------------------------ */

  .seeds-drawer-popup[data-nested-drawer-open] {
    border-radius: var(--radius-800);
  }

  /* Bottom non-snap stacked bottom-sheet animation. Snap-point drawers don't
     participate: the stack math overwrites --translate-y and clips overflow,
     which collides with base-ui's snap-offset transform. */
  .seeds-drawer-popup--bottom:not(
      .seeds-drawer-popup--snap
    )[data-nested-drawer-open] {
    --stack-step: 0.05;
    --stack-progress: clamp(0, var(--drawer-swipe-progress), 1);
    /* Override default vars; base transform rule picks them up automatically */
    --stack-scale: max(
      0,
      calc(
        1 - (var(--nested-drawers) * var(--stack-step)) +
          (var(--stack-step) * var(--stack-progress))
      )
    );
    --stack-shrink: calc(1 - var(--stack-scale));
    --stack-height: max(
      0px,
      calc(var(--drawer-frontmost-height, var(--drawer-height)) - var(--bleed))
    );
    --stack-peek-offset: max(
      0px,
      calc((var(--nested-drawers) - var(--stack-progress)) * 1rem)
    );
    --translate-y: calc(
      var(--drawer-swipe-movement-y) - var(--stack-peek-offset) -
        (var(--stack-shrink) * var(--stack-height))
    );
    height: calc(var(--stack-height) + var(--bleed));
    overflow: hidden;
  }

  /* Side stacked animation. */
  .seeds-drawer-popup--side[data-nested-drawer-open] {
    transform: translateY(calc(var(--nested-drawers) * -20px))
      scale(calc(1 - var(--nested-drawers) * 0.08));
    transform-origin: top center;
  }

  /* Fade children out while stacked — every direction except snap. */
  .seeds-drawer-popup:not(.seeds-drawer-popup--snap)[data-nested-drawer-open]
    > * {
    opacity: 0;
  }

  /* While actively swiping a nested drawer, keep children visible. Equal
     specificity to the fade-out rule above, so this must come after it. */
  .seeds-drawer-popup[data-nested-drawer-open][data-nested-drawer-swiping] > * {
    opacity: 1;
  }

  /* Header ------------------------------------------------------------------ */

  /* Port of the styled-components Box header (DrawerShared.tsx): flex row with
     the title and close button, fixed at the top of the popup. */
  .seeds-drawer-header {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-400);
    padding-left: var(--space-450);
    padding-right: var(--space-450);
  }

  /* Default title typography. `margin: 0` neutralises the user-agent <h2>
     margin that the styled path's <Text> reset for us, avoiding a layout shift
     between the Tailwind and styled headers. */
  .seeds-drawer-header-title {
    margin: 0;
    font-size: var(--font-size-400);
    line-height: var(--line-height-400);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-headline);
  }

  /* Content ----------------------------------------------------------------- */

  /* Port of the styled-components Content (styles.ts) plus the styled-system
     props it was rendered with (height/padding/color). */
  .seeds-drawer-content {
    height: 100%;
    padding: var(--space-450);
    overflow-y: auto;
    color: var(--color-text-body);
  }
}

/* --- seeds-react-duration --- */
/**
 * Seeds Duration component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support (consistent with other Seeds
 * components). font-variant-numeric has no design token, so this rule uses none.
 *
 * Usage:
 *   <span class="seeds-duration">1m 30s</span>
 */

@layer components {
  .seeds-duration {
    font-variant-numeric: tabular-nums;
  }
}

/* --- seeds-react-empty-state --- */
/**
 * Seeds EmptyState component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-empty-state">...</div>
 *
 * Rules live in @layer components so that consumer Tailwind utilities
 * (e.g. mx-200, p-300) win in the cascade and can override these component
 * styles, rather than tying/beating them on specificity.
 */

@layer components {
  .seeds-empty-state {
    max-width: 400px;
    margin-inline: auto;
  }

  .seeds-empty-state-media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: var(--space-450);
  }

  .seeds-empty-state-content {
    text-align: center;
  }

  .seeds-empty-state-headline {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--font-family);
    color: var(--color-text-headline);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-400);
    line-height: var(--line-height-400);
  }

  .seeds-empty-state-subtext {
    margin: 0;
    margin-top: var(--space-400);
    padding-left: 0;
    padding-right: 0;
    font-family: var(--font-family);
    color: var(--color-text-subtext);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
  }

  .seeds-empty-state-actions {
    margin-top: var(--space-450);
  }

  /* -empty MUST follow the base rule: equal specificity, source order wins */
  .seeds-empty-state-actions-empty {
    margin-top: 0;
  }

  .seeds-empty-state-secondary-action {
    margin-top: var(--space-400);
  }
}

/* --- seeds-react-fieldset --- */
/**
 * Seeds Fieldset component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <fieldset class="seeds-fieldset">
 *     <legend class="seeds-fieldset-legend">Label</legend>
 *     <p class="seeds-fieldset-helper-text">Helper text</p>
 *     <div class="seeds-fieldset-list seeds-fieldset-list-vertical">
 *       <div class="seeds-fieldset-item seeds-fieldset-item-vertical">...</div>
 *     </div>
 *   </fieldset>
 */

@layer components {
  .seeds-fieldset {
    box-sizing: border-box;
    font-family: var(--font-family);
    border: none;
    padding: 0;
  }

  .seeds-fieldset-legend {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-300);
    line-height: var(--line-height-300);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    margin-bottom: var(--space-300);
  }

  .seeds-fieldset-helper-text {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    margin-bottom: var(--space-300);
  }

  .seeds-fieldset-list {
    box-sizing: border-box;
    font-family: var(--font-family);
    display: flex;
  }

  .seeds-fieldset-list-vertical {
    flex-direction: column;
  }

  .seeds-fieldset-list-horizontal {
    flex-direction: row;
  }

  .seeds-fieldset-item {
    box-sizing: border-box;
    font-family: var(--font-family);
  }

  .seeds-fieldset-item-vertical {
    margin-top: var(--space-300);
  }

  .seeds-fieldset-item-vertical:first-child {
    margin-top: 0;
  }

  .seeds-fieldset-item-horizontal {
    margin-left: var(--space-300);
  }

  .seeds-fieldset-item-horizontal:first-child {
    margin-left: 0;
  }
}

/* --- seeds-react-form-field --- */
/**
 * Seeds FormField component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * FormField only contributes the container's vertical layout/margin; the
 * label, helper text, and error text colors and spacing are owned by the
 * composed Label/Text children (via their styled-system tokens), so this
 * class carries layout only and hard-codes no color tokens.
 *
 * Usage:
 *   <div class="seeds-form-field">…label, field, error…</div>
 */

@layer components {
  .seeds-form-field {
    display: block;
  }
}

/* --- seeds-react-grid --- */
/**
 * Seeds Grid component classes.
 *
 * Scalar column/gap values are applied inline by GridTailwind (jsdom-safe and
 * they win over these rules). These rules provide sane defaults and drive the
 * responsive cases: GridTailwind sets --sg-* custom properties per breakpoint
 * and the media queries below promote them, resolving the sm -> md -> lg -> xl
 * cascade. Breakpoints match @sproutsocial/seeds-react-theme
 * (sm 640 / md 768 / lg 1024 / xl 1280).
 *
 * All rules are wrapped in `@layer components` so consumer Tailwind utilities
 * (unlayered) win the cascade, matching button.css.
 */

@layer components {
  .seeds-grid {
    display: grid;
    grid-template-columns: var(--sg-cols, repeat(1, 1fr));
    row-gap: var(--sg-row-gap, 0);
    column-gap: var(--sg-col-gap, 0);
  }

  @media (min-width: 640px) {
    .seeds-grid {
      grid-template-columns: var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)));
      row-gap: var(--sg-row-gap-sm, var(--sg-row-gap, 0));
      column-gap: var(--sg-col-gap-sm, var(--sg-col-gap, 0));
    }
  }

  @media (min-width: 768px) {
    .seeds-grid {
      grid-template-columns: var(
        --sg-cols-md,
        var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)))
      );
      row-gap: var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)));
      column-gap: var(
        --sg-col-gap-md,
        var(--sg-col-gap-sm, var(--sg-col-gap, 0))
      );
    }
  }

  @media (min-width: 1024px) {
    .seeds-grid {
      grid-template-columns: var(
        --sg-cols-lg,
        var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
      );
      row-gap: var(
        --sg-row-gap-lg,
        var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
      );
      column-gap: var(
        --sg-col-gap-lg,
        var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
      );
    }
  }

  @media (min-width: 1280px) {
    .seeds-grid {
      grid-template-columns: var(
        --sg-cols-xl,
        var(
          --sg-cols-lg,
          var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
        )
      );
      row-gap: var(
        --sg-row-gap-xl,
        var(
          --sg-row-gap-lg,
          var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
        )
      );
      column-gap: var(
        --sg-col-gap-xl,
        var(
          --sg-col-gap-lg,
          var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
        )
      );
    }
  }
}

/* --- seeds-react-icon --- */
/**
 * Seeds Icon component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * The dynamic `size` prop is applied through the `--icon-size` custom property,
 * set inline by IconTailwind (e.g. style={{ "--icon-size": "16px" }}).
 *
 * Usage:
 *   <span class="Icon seeds-icon" style="--icon-size: 16px">
 *     <svg class="Icon-svg" />
 *   </span>
 */

@layer components {
  .seeds-icon {
    display: inline-block;
    color: inherit;
    vertical-align: middle;
    line-height: var(--icon-size);
  }

  .seeds-icon,
  .seeds-icon .Icon-svg {
    height: var(--icon-size);
    fill: currentColor;
  }

  /* width only applied when fixedWidth */
  .seeds-icon-fixed-width,
  .seeds-icon-fixed-width .Icon-svg {
    width: var(--icon-size);
  }

  /**
   * AI gradient fill — paint any icon with the AI brand gradient instead of
   * currentColor, so AI surfaces don't need a bespoke `*-gradient-*.svg` export
   * per icon.
   *
   *   <Icon name="sparkle-solid" className="seeds-icon-gradient-ai" />
   *
   * Scoped to .Icon-svg rather than .seeds-icon so it works on both render paths:
   * the styled-components Container only carries the `Icon` class, not `seeds-icon`.
   *
   * The `#9747ff` after the url() is SVG paint fallback syntax, not a second
   * declaration. It covers the frame between first paint and IconHybrid's effect
   * appending the <radialGradient> defs — an unresolvable paint server would
   * otherwise render the glyph as nothing. It is the gradient's mid stop, so the
   * fallback reads as a flat AI purple rather than a miss.
   */
  .seeds-icon-gradient-ai .Icon-svg {
    fill: url(#seeds-gradient-ai) #9747ff;
  }

  /**
   * Stop colors for the injected paint server (see gradientDefs.ts). These live in
   * CSS rather than on the <stop> elements because var() does not resolve inside
   * SVG presentation attributes — putting them here is what makes gradient icons
   * respond to dark mode via the theme's .dark variable swap.
   */
  .seeds-gradient-ai-stop-1 {
    stop-color: var(--color-gradient-ai-stop-1);
  }

  .seeds-gradient-ai-stop-2 {
    stop-color: var(--color-gradient-ai-stop-2);
  }

  .seeds-gradient-ai-stop-3 {
    stop-color: var(--color-gradient-ai-stop-3);
  }
}

/* --- seeds-react-image --- */
/**
 * Seeds Image component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Usage:
 *   <img class="seeds-image" />
 *   <img class="seeds-image seeds-image-loading" />
 */

@layer components {
  .seeds-image {
    display: block;
  }

  .seeds-image-loading {
    opacity: 0;
  }
}

/* --- seeds-react-indicator --- */
/**
 * Seeds Indicator component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * All rules are wrapped in `@layer components` so that consumer Tailwind
 * utilities (unlayered) win the cascade over these styles.
 */

@layer components {
  .seeds-indicator {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--space-400);
    height: var(--space-400);
    font-size: 10px;
    line-height: 0;
    color: var(--color-icon-info);
    text-align: center;
  }

  .seeds-indicator > div {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
}

/* --- seeds-react-input --- */
/**
 * Seeds Input component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-input seeds-input-primary"><input /></div>
 *   <div class="seeds-input seeds-input-primary seeds-input-lg"><input /></div>
 */

@layer components {
  .seeds-input {
    box-sizing: border-box;
    position: relative;
  }

  .seeds-input input {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--radius-500);
    background-color: var(--color-form-bg-base);
    color: var(--color-text-body);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-ease_in),
      box-shadow var(--duration-fast) var(--ease-ease_in);
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    appearance: none;
    /* This matches the overall height of Button and Select */
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: var(--space-300);
    font-size: var(--font-size-200);
    line-height: 16px;
  }

  /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
  .seeds-input input::-ms-clear {
    display: none;
  }

  .seeds-input input::-webkit-search-cancel-button {
    appearance: none;
  }

  .seeds-input input:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0 0 4px
        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
  }

  /* Fix for red ring when input is marked required in Firefox */
  .seeds-input input:not(output):not(:focus):-moz-ui-invalid {
    box-shadow: none;
  }

  .seeds-input input::placeholder {
    color: var(--color-form-placeholder-base);
    font-style: italic;
  }

  /* Size modifiers */
  .seeds-input-lg input {
    padding: var(--space-350) var(--space-400);
    font-size: var(--font-size-300);
    line-height: var(--line-height-300);
  }

  .seeds-input-sm input {
    padding: var(--space-200);
  }

  /* Accessory spacing */
  .seeds-input-has-before input {
    padding-left: 40px;
  }

  .seeds-input-has-after input {
    padding-right: 40px;
  }

  /* Appearance */
  .seeds-input-primary input {
    border: 1px solid var(--color-form-border-base);
  }

  /* State borders — declared after appearance so border-color wins */
  .seeds-input-invalid input {
    border-color: var(--color-form-border-error);
  }

  .seeds-input-warning input {
    border-color: var(--color-form-border-warning);
  }

  /* Disabled */
  .seeds-input-disabled {
    opacity: 0.4;
  }

  .seeds-input-disabled input {
    cursor: not-allowed;
  }

  /* Accessories (before / after / clear button) */
  .seeds-input-accessory {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-icon-base);
    display: flex;
    align-items: center;
  }

  .seeds-input-accessory-before {
    left: var(--space-300);
  }

  .seeds-input-accessory-after {
    right: var(--space-300);
  }

  .seeds-input-accessory-clear {
    right: 0;
  }
}

/* --- seeds-react-keyboard-key --- */
/**
 * Seeds KeyboardKey component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * All rules are wrapped in `@layer components` so that consumer Tailwind
 * utilities (unlayered) win the cascade over these styles.
 */

@layer components {
  .seeds-keyboard-key {
    display: inline-flex;
    color: var(--color-text-body);
    background-color: var(--color-container-bg-base);
    border: 1px solid var(--color-container-border-base);
    border-radius: var(--radius-500);
    box-shadow: var(--shadow-low);
    padding: 0 var(--space-200);
    min-width: 20px;
    justify-content: center;
  }
}

/* --- seeds-react-label --- */
/**
 * Seeds Label component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * All rules are wrapped in `@layer components` so that consumer Tailwind
 * utilities (unlayered) win the cascade over these styles.
 */

@layer components {
  .seeds-label {
    display: flex;
    align-items: center;
  }
}

/* --- seeds-react-link --- */
/**
 * Seeds Link component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Rules live in the Tailwind `components` layer so consumer utility classes
 * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
 */

@layer components {
  .seeds-link {
    border: 0;
    appearance: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    color: var(--color-link-base);
    text-decoration: none;
  }

  .seeds-link-underline {
    text-decoration: underline;
  }

  .seeds-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  .seeds-link:active {
    color: var(--color-link-hover);
  }

  .seeds-link:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0 0 4px
        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
  }

  .seeds-link:focus:active {
    box-shadow: none;
  }

  .seeds-link-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* When rendered as a button (no href) remove the native button background */
  .seeds-link-no-href {
    background: none;
  }
}

/* --- seeds-react-loader --- */
/**
 * Seeds Loader component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-loader seeds-loader-delay">
 *     <span class="seeds-loader-spinner" aria-hidden="true"></span>
 *     <span class="seeds-loader-visually-hidden">Loading</span>
 *   </div>
 *   <div class="seeds-loader seeds-loader-sm">...</div>            (small)
 *   <div class="seeds-loader">...</div>                            (no delay)
 *
 * The visual is Exploration 1 "Border Top Spinner": a single bordered ring
 * element (--color-container-border-decorative-neutral) whose top and left
 * borders are accented (--color-container-border-base), rotating once per
 * 3s cycle. No pseudo-elements, no clip.
 */

@layer components {
  @keyframes seeds-loader-spin {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(540deg);
    }
    100% {
      transform: rotate(1080deg);
    }
  }

  @keyframes seeds-loader-delay-anim {
    0% {
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* Base (large / 40px) — layout only; the spinner element carries rotation. */
  .seeds-loader {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 40px;
    height: 40px;
  }

  /* Visual spinner IS the bordered ring — faint full border with accented
     top/left, rotating once per 3s cycle. */
  .seeds-loader-spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 4px solid var(--color-container-border-decorative-neutral);
    border-top-color: var(--color-container-border-base);
    border-left-color: var(--color-container-border-base);
    border-radius: 100%;
    animation: seeds-loader-spin 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  }

  /* Delay variant — fades the spinner in; rotation lives on the spinner. */
  .seeds-loader-delay {
    animation: seeds-loader-delay-anim 2s 1;
  }

  /* Small (20px) — scale size and border width together. */
  .seeds-loader-sm,
  .seeds-loader-sm .seeds-loader-spinner {
    width: 20px;
    height: 20px;
  }

  .seeds-loader-sm .seeds-loader-spinner {
    border-width: 2px;
  }

  /* Visually-hidden accessibility text */
  .seeds-loader-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
}

/* --- seeds-react-loader-button --- */
/**
 * Seeds LoaderButton component classes
 * Layered on top of the Button (.seeds-btn*) classes to reproduce the disabled
 * background dimming the styled-components LoaderButton applied.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Rules live in the Tailwind `components` layer so consumer utility classes
 * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
 */

@layer components {
  /* Keep the loader fully visible by overriding .seeds-btn-disabled opacity: 0.5 */
  .seeds-loader-btn-disabled.seeds-btn-disabled {
    opacity: 1;
  }

  /* Disabled background: the appearance's base color at 40% alpha. */
  .seeds-loader-btn-disabled.seeds-btn-primary {
    background-color: color-mix(
      in srgb,
      var(--color-button-primary-bg-base) 40%,
      transparent
    );
  }

  .seeds-loader-btn-disabled.seeds-btn-destructive {
    background-color: color-mix(
      in srgb,
      var(--color-button-destructive-bg-base) 40%,
      transparent
    );
  }

  /* Appearances whose base background is transparent resolve to transparent. */
  .seeds-loader-btn-disabled.seeds-btn-secondary {
    background-color: transparent;
  }

  .seeds-loader-btn-disabled.seeds-btn-placeholder {
    background-color: transparent;
  }

  .seeds-loader-btn-disabled.seeds-btn-unstyled {
    background-color: transparent;
  }

  .seeds-loader-btn-disabled.seeds-btn-pill {
    background-color: transparent;
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds AIContainer component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-ai-container">…</div>            // subtle (default)
 *   <div class="seeds-ai-container seeds-ai-container-vivid">…</div>
 */

@layer components {
  .seeds-ai-container {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--radius-800);
    box-shadow: var(--shadow-low);
    font-family: var(--font-family);
    /* Subtle (default): the 20% AI gradient tint composited over the base
     surface. --color-gradient-ai-subtle is already translucent, so layering it
     over the opaque base color produces the soft wash. */
    background-color: var(--color-container-bg-base);
    background-image: var(--color-gradient-ai-subtle);
    color: var(--color-text-headline);
  }

  /* Vivid: the full-saturation AI gradient with white content. White has no
   semantic Seeds token; it is part of the AI gradient treatment (mirrors the
   raw brand hex used in --color-gradient-ai). */
  .seeds-ai-container-vivid {
    background-color: transparent;
    background-image: var(--color-gradient-ai);
    color: #fff;
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds EyebrowToken component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <span class="seeds-eyebrow-token">May 31, 2026</span>
 */

@layer components {
  /* A solid gray pill matching the design: background and border are both the
   #dee1e1 container-border-base token, which also tracks dark mode. The two
   pixel literals below have no exact theme token — the --space scale skips 6px
   (4px→8px) and the --font-size scale skips 12px (11px→13px) — so the design's
   values are kept verbatim. All colors use tokens. */
  .seeds-eyebrow-token {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-100); /* 2px */
    padding: var(--space-100) var(--space-300); /* 2px / 8px */
    border: 1px solid var(--color-container-border-base); /* #dee1e1 */
    border-radius: var(--radius-500); /* 6px */
    background-color: var(--color-container-border-base); /* #dee1e1 */
    font-family: var(--font-family);
    font-size: 12px; /* text-sm */
    line-height: 20px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body);
    white-space: nowrap;
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds MetricHighlight component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-metric-highlight">…</div>                       // horizontal, default
 *   <div class="seeds-metric-highlight seeds-metric-highlight-vertical">…</div>
 *   <div class="seeds-metric-highlight seeds-metric-highlight-small">…</div>
 *   <div class="seeds-metric-highlight seeds-metric-highlight-bare">…</div>   // no surface
 */

@layer components {
  .seeds-metric-highlight {
    box-sizing: border-box;
    display: flex;
    /* Wrap the fixed-width chart onto its own line when the metric block + chart
     can't sit side by side (narrow cards / mobile). The metric block claims its
     min-content width below, so a cramped row drops the chart down rather than
     overflowing the card and getting clipped by the container. */
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-350); /* 12px */
    border-radius: var(--radius-800); /* 12px */
    font-family: var(--font-family);
    /* Container (default): a padded gray app surface (matches the design's
     #f3f4f4 box). `-bare` strips it. */
    padding: var(--space-400) var(--space-450); /* 16px / 24px */
    background-color: var(--color-app-bg-base);
  }

  .seeds-metric-highlight-bare {
    padding: 0;
    background-color: transparent;
  }

  .seeds-metric-highlight-vertical {
    flex-direction: column;
  }

  /* The metric block: label + value/trend. Grows to fill the row in horizontal. */
  .seeds-metric-highlight-metric {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-200); /* 4px */
    /* Grow to fill the row, but never shrink below the metric's own content
     (the nowrap value + trend pill). That min-content floor is what forces the
     chart to wrap below on narrow cards instead of the row overflowing. */
    flex: 1 1 auto;
    min-width: min-content;
  }

  .seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
    width: 100%;
    flex: 0 0 auto;
  }

  /* Small: label and value collapse onto a single centered row. */
  .seeds-metric-highlight-small .seeds-metric-highlight-metric {
    flex-direction: row;
    align-items: center;
    gap: var(--space-300); /* 8px */
  }

  .seeds-metric-highlight-label {
    margin: 0;
    font-size: var(--font-size-300); /* 16px */
    line-height: var(--line-height-400); /* ~28px */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body);
    overflow-wrap: break-word;
  }

  /* In small, the label takes the slack so the value/trend align to the end. */
  .seeds-metric-highlight-small .seeds-metric-highlight-label {
    flex: 1 0 0;
    min-width: 0;
  }

  .seeds-metric-highlight-value-row {
    display: flex;
    flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
    align-items: center;
    gap: var(--space-300); /* 8px */
  }

  .seeds-metric-highlight-small .seeds-metric-highlight-value-row {
    justify-content: flex-end;
  }

  .seeds-metric-highlight-value {
    margin: 0;
    /* No mono token exists yet; fall back to a system monospace stack. Mirrors the
     font/font-mono treatment in the design. */
    font-family: var(
      --font-family-mono,
      ui-monospace,
      "SF Mono",
      SFMono-Regular,
      Menlo,
      monospace
    );
    font-size: var(--font-size-700); /* 32px */
    line-height: var(--line-height-700); /* 40px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-headline);
    white-space: nowrap;
  }

  .seeds-metric-highlight-small .seeds-metric-highlight-value {
    font-size: var(--font-size-600); /* 24px */
    line-height: var(--line-height-600); /* 32px */
  }

  /* Trend badge — a rounded pill. Up is the positive (green) treatment; down
   swaps to the negative (red) treatment. Color flows to the arrow + value via
   currentColor. */
  .seeds-metric-highlight-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-200); /* 4px */
    padding: var(--space-100) var(--space-300); /* 2px / 8px */
    border-radius: 999px;
    font-size: var(--font-size-200); /* 13px */
    line-height: var(--line-height-200);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    background-color: var(--color-container-bg-decorative-green);
    color: var(--color-text-decorative-green);
  }

  .seeds-metric-highlight-trend-down {
    background-color: var(--color-container-bg-decorative-red);
    color: var(--color-text-decorative-red);
  }

  .seeds-metric-highlight-trend-arrow {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  /* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
   stroke/background styling, so the injected chart controls its own look. Heights
   are explicit (never percentage/stretch) so a Highcharts chart always measures a
   concrete container instead of falling back to its 400px default. */
  .seeds-metric-highlight-chart {
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    /* Center the injected chart as a flex item — an inline/inline-block child
     (e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
     descender space below it, reading as vertically off-center in the slot. */
    display: flex;
    align-items: center;
  }

  .seeds-metric-highlight:not(.seeds-metric-highlight-vertical)
    .seeds-metric-highlight-chart {
    width: 104px;
    height: 48px;
  }

  .seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical)
    .seeds-metric-highlight-chart {
    width: 88px;
    height: 40px;
  }

  .seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
    width: 100%;
    height: 96px;
  }

  .seeds-metric-highlight-vertical.seeds-metric-highlight-small
    .seeds-metric-highlight-chart {
    height: 56px;
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeAttribution component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-narrative-attribution">
 *     <img class="seeds-narrative-attribution-avatar" />
 *     <div class="seeds-narrative-attribution-social-icon">...</div>
 *     <span class="seeds-narrative-attribution-user-name">...</span>
 *   </div>
 */

@layer components {
  /* Main container — horizontal layout with avatar, social icon, and user name. */
  .seeds-narrative-attribution {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-300); /* 8px */
    font-family: var(--font-family);
  }

  /* Circular avatar image — fixed size with rounded corners. */
  .seeds-narrative-attribution-avatar {
    width: var(--space-450); /* 24px */
    height: var(--space-450); /* 24px */
    border-radius: var(--radius-circular); /* 50% */
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Social network icon container — flexible sizing for partner logos. */
  .seeds-narrative-attribution-social-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* User name text — bold headline text with ellipsis overflow. */
  .seeds-narrative-attribution-user-name {
    overflow: hidden;
    color: var(--color-text-headline);
    text-overflow: ellipsis;
    font-family: var(--font-family);
    font-size: var(--text-base-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--text-base-line-height, 24px);
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeContainer component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-narrative-container seeds-narrative-container-accent">…</div>
 */

@layer components {
  .seeds-narrative-container {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-500);
    border-radius: var(--radius-800);
    box-shadow: var(--shadow-low);
    background-color: var(--color-container-bg-base);
    font-family: var(--font-family);
  }

  /* Grid and flex items default to `min-width: auto`, so they never shrink below
   their own min-content. A wide row of widgets (a metric grid, a card grid) then
   forces its column wider than the padded surface — and since the container clips
   with overflow:hidden, the excess is cut off at the edge, eating the right-hand
   padding, and the whole layout can't reflow down to mobile widths. Letting the
   container and its layout descendants shrink to zero lets the grids collapse to
   their fair 1fr share and reflow within the padding, so the padding stays
   consistent at every size.

   Wrapped in :where() so the whole rule carries ZERO specificity — it is only a
   default. Any component that needs a real floor (e.g. the data callout's 270px
   donut slot) sets its own min-width via a plain class and always wins, instead
   of racing this rule on source order. */
  :where(.seeds-narrative-container),
  :where(.seeds-narrative-container *) {
    min-width: 0;
  }

  /* Decorative inner gradient border anchored to the top-left corner.
   A masked ::before so the gradient renders as a uniform-width ring that follows
   border-radius and never tints the content. The radial ellipse fades to
   transparent away from the corner; its x-radius (80%) is larger than its
   y-radius (60%) so the accent runs slightly further along the top edge than down
   the left edge. Brand stops mirror --color-gradient-ai — tokenize to a
   --color-gradient-* token once one exists for a fade-to-transparent variant. */
  .seeds-narrative-container-accent::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 4px;
    background: radial-gradient(
      ellipse 80% 60% at top left,
      #205bc3 0%,
      #9747ff 28%,
      #f282f5 50%,
      transparent 72%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeDataCallout component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * The layout is a flex row driven by a container query on the root, so the
 * visual/text columns stack based on the width the component is given, not the
 * viewport.
 *
 * Usage:
 *   <div class="seeds-narrative-data-callout">
 *     <div class="seeds-narrative-data-callout-row">
 *       <div class="seeds-narrative-data-callout-visual">…chart…</div>
 *       <div class="seeds-narrative-data-callout-body">…copy…</div>
 *     </div>
 *   </div>
 */

@layer components {
  /* Establishes the query container. The row inside reacts to this element's
   inline size. A container query only styles DESCENDANTS of the query container,
   so the flex row lives on the inner element, not this one. */
  .seeds-narrative-data-callout {
    container-type: inline-size;
    box-sizing: border-box;
    font-family: var(--font-family);
  }

  /* Stacked single column by default (narrow). The container query below turns it
   into the horizontal 1/3 + 2/3 row once there is room. */
  .seeds-narrative-data-callout-row {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-450); /* 24px */
  }

  /* Visual slot — layout only, no stroke/background so the injected chart controls
   its own look and its own size. No fixed height: charts like the data-viz
   DonutChart carry their own intrinsic height (and a legend), so the slot sizes
   to the chart rather than clipping it. Stacked full-width until the container
   query expands the row. */
  .seeds-narrative-data-callout-visual {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
  }

  /* Stretch the injected visual to the slot's full width. A fluid-width chart like
   the v2 DonutChart otherwise shrinks to content inside this centered flex slot,
   so Highcharts fills that shrunk width and the ring gets width-capped below its
   fixed 270px height — leaving an empty vertical band. Filling the width lets the
   ring become height-capped and fill its box top-to-bottom, like the standalone
   chart story. */
  .seeds-narrative-data-callout-visual > * {
    width: 100%;
  }

  /* Body copy — fills the remaining space. */
  .seeds-narrative-data-callout-body {
    box-sizing: border-box;
    min-width: 0;
    font-size: var(--font-size-300); /* 16px */
    line-height: var(--line-height-400); /* ~28px */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body);
    overflow-wrap: break-word;
  }

  /* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
   The threshold is on the component's own width (container query), so a narrow
   callout on a wide screen still stacks. 480px keeps the donut + copy readable
   side by side. */
  @container (min-width: 480px) {
    .seeds-narrative-data-callout-row {
      flex-direction: row;
    }

    .seeds-narrative-data-callout-visual {
      /* Nominally one-third, but never narrower than the injected chart's fixed
       height (the v2 DonutChart is 270px tall). Below that width a fluid-width,
       fixed-height chart like the donut gets width-capped and leaves an empty
       vertical band above/below the ring; the min-width keeps the visual square
       enough that the ring fills its box top-to-bottom, matching the standalone
       chart story. */
      flex: 0 0 33.333%;
      min-width: 270px;
      width: auto;
    }

    .seeds-narrative-data-callout-body {
      flex: 1 1 0;
    }
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeDivider component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <hr class="seeds-narrative-divider" />
 */

@layer components {
  /* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
   and a beveled border, so reset those and draw the line with a single
   border-top using the container-border-base token (#dee1e1), which also
   tracks dark mode. */
  .seeds-narrative-divider {
    box-sizing: border-box;
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeHeadline component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <h2 class="seeds-narrative-headline">
 *     Headline with a
 *     <span class="seeds-narrative-headline-highlight">highlighted</span>
 *     word
 *   </h2>
 */

@layer components {
  /* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
  .seeds-narrative-headline {
    box-sizing: border-box;
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-700);
    line-height: var(--line-height-700);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-text-headline);
  }

  /* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
   spacing, and color are inherited from the base class. */
  .seeds-narrative-headline-small {
    font-size: var(--font-size-600); /* 24px */
    line-height: var(--line-height-600); /* 32px */
  }

  /* Static gradient accent for a span of headline text ("highlighted word").
   Paints the AI brand gradient onto the glyphs via background-clip. */
  .seeds-narrative-headline-highlight {
    background: var(--color-gradient-ai);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* -------------------------------------------------------------------------
   "Roll" variant — vertical word roll. The active word slides into view
   while the previous one rolls out.
   ------------------------------------------------------------------------- */
  .seeds-narrative-headline-roll {
    display: inline-block;
    position: relative;
    /* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
     snaps its baseline to the bottom margin edge, dropping the rolling word
     below the surrounding text. clip-path keeps the natural baseline. */
    clip-path: inset(0);
  }

  /* Invisible word that holds the box width to the active word. */
  .seeds-narrative-headline-roll-sizer {
    display: inline-block;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
  }

  .seeds-narrative-headline-roll-word {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    transform: translateY(100%);
    opacity: 0;
    transition: transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
      opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
  }

  .seeds-narrative-headline-roll-word-active {
    transform: translateY(0);
    opacity: 1;
  }

  .seeds-narrative-headline-roll-word-past {
    transform: translateY(-100%);
    opacity: 0;
  }

  /* Reverse the roll direction. */
  .seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
    transform: translateY(-100%);
  }
  .seeds-narrative-headline-roll-down
    .seeds-narrative-headline-roll-word-active {
    transform: translateY(0);
  }
  .seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
    transform: translateY(100%);
  }

  /* Gradient-painted rolling words with a slow shimmer. */
  .seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
    background: var(--color-gradient-ai);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: seeds-narrative-headline-grad-shift 8s ease infinite;
  }

  @keyframes seeds-narrative-headline-grad-shift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* The JS cycle is already disabled under reduced-motion (the first word holds);
   also flatten the transition and shimmer so any in-flight motion settles. */
  @media (prefers-reduced-motion: reduce) {
    .seeds-narrative-headline-roll-word {
      transition: none;
    }
    .seeds-narrative-headline-roll-gradient
      .seeds-narrative-headline-roll-word {
      animation: none;
    }
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeOrderedList component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-narrative-ordered-list">
 *     <ol class="seeds-narrative-ordered-list-track">
 *       <li class="seeds-narrative-ordered-list-item">…</li>
 *     </ol>
 *   </div>
 */

@layer components {
  /* Establishes the query container. The track inside reacts to this element's
   inline size — a container query can only style descendants of the container,
   never the container element itself. */
  .seeds-narrative-ordered-list {
    container-type: inline-size;
    box-sizing: border-box;
    font-family: var(--font-family);
  }

  /* The list itself, and the default (stacked) layout. The horizontal modifier
   only expands to a row once the container query below has room, so horizontal
   collapses back to this stack when narrow. */
  .seeds-narrative-ordered-list-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-400); /* 16px */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* An item row: the ordinal beside the body, on its own rounded surface. */
  .seeds-narrative-ordered-list-item {
    display: flex;
    gap: var(--space-450); /* 24px */
    align-items: flex-start;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--space-400) var(--space-450); /* 16px 24px */
    border-radius: var(--radius-800); /* 12px */
    background-color: var(--color-app-bg-base);
  }

  /* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
   monospace stack — mirrors the value treatment in metric-highlight.css. */
  .seeds-narrative-ordered-list-number {
    margin: 0;
    flex-shrink: 0;
    font-family: var(
      --font-family-mono,
      ui-monospace,
      "SF Mono",
      SFMono-Regular,
      Menlo,
      monospace
    );
    font-size: var(--font-size-700); /* 32px */
    line-height: var(--line-height-700); /* 40px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-headline);
  }

  /* Title + description + optional action, stacked. */
  .seeds-narrative-ordered-list-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-200); /* 4px */
    min-width: 0;
  }

  /* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
   skips from 24px to 32px), so the design value is kept verbatim. Same
   rationale as narrative-summary.css. */
  .seeds-narrative-ordered-list-title {
    margin: 0;
    font-size: var(--font-size-300); /* 16px */
    line-height: 28px; /* off-scale, see comment above */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-body);
  }

  /* Description. 14px / 24px has no exact type token, so it is kept verbatim —
   same rationale as the title above. */
  .seeds-narrative-ordered-list-description {
    margin: 0;
    font-size: 14px; /* off-scale, see title above */
    line-height: 24px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body);
  }

  .seeds-narrative-ordered-list-action {
    padding-top: var(--space-350); /* 12px */
  }

  /* Expand the horizontal variant to a row of equal columns once the component is
   wide enough. The threshold is on the component's own width (container query),
   so a narrow card on a wide screen still stacks. 640px = Tailwind/Seeds sm
   breakpoint, matching narrative-summary.css. */
  @container (min-width: 640px) {
    .seeds-narrative-ordered-list-horizontal {
      flex-direction: row;
    }

    .seeds-narrative-ordered-list-horizontal
      > .seeds-narrative-ordered-list-item {
      flex: 1 1 0;
      min-width: 0;
    }
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeSection component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <section class="seeds-narrative-section">
 *     <h2 class="seeds-narrative-section-title">What's Happening</h2>
 *     <div class="seeds-narrative-section-content">...</div>
 *   </section>
 */

@layer components {
  /* The wrapper stacks the title above the content with a small gap. It carries
   no surface of its own — it's meant to sit inside a NarrativeContainer. */
  .seeds-narrative-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-400); /* 16px — title to content */
  }

  /* The content slot stacks the section's widgets with the same 32px rhythm a
   single-column grid (gap={500}) would give them, so multiple primitives inside
   one section are spaced exactly as they are between sections. */
  .seeds-narrative-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-500); /* 32px — between widgets */
  }

  /* The section title: bold 14px/24px in the headline color token (#273333,
   which also tracks dark mode). Matches the summary-label recipe used across
   the kit. The heading element ships with user-agent margins, so reset them. */
  .seeds-narrative-section-title {
    margin: 0;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-headline); /* #273333 */
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeSocialMediaCard component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-narrative-social-media-card">
 *     <div class="seeds-narrative-social-media-card-header">...</div>
 *     <div class="seeds-narrative-social-media-card-content">...</div>
 *     <div class="seeds-narrative-social-media-card-footer">...</div>
 *   </div>
 */

@layer components {
  /* Main card container — gray background with rounded corners and padding.
   Uses Seeds tokens for spacing, colors, and radius to match the design system.
   Fills the width it is given (e.g. a grid column) and stretches its content to
   match, mirroring the horizontal NarrativeOrderedList — so a row of cards grows
   and resizes together instead of being pinned to a fixed 320px. */
  .seeds-narrative-social-media-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: var(--space-450); /* 24px */
    border-radius: var(--radius-500); /* 6px */
    background-color: var(--color-app-bg-base);
    font-family: var(--font-family);
    color: var(--color-text-body);
  }

  /* No background — transparent background for cards that blend seamlessly with the page. */
  .seeds-narrative-social-media-card--no-background {
    background-color: transparent;
  }

  /* Main content area — standard body text styling. */
  .seeds-narrative-social-media-card-content {
    flex: 1;
    margin-top: var(--space-400); /* 16px */
    font-family: var(--font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-body);
  }

  /* Footer section — horizontal layout for stats with equal spacing. */
  .seeds-narrative-social-media-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-400); /* 16px */
    margin-top: var(--space-400); /* 16px */
  }

  /* Hide footer when empty (no metadata items). */
  .seeds-narrative-social-media-card-footer:empty {
    display: none;
  }

  /* Individual stat container — icon + value in horizontal layout. */
  .seeds-narrative-social-media-card-stat {
    display: flex;
    align-items: center;
    gap: var(--space-200); /* 4px */
  }

  /* Stat value text — monospace font for numeric values. */
  .seeds-narrative-social-media-card-stat-value {
    font-family: var(
      --font-family-mono,
      ui-monospace,
      "SF Mono",
      SFMono-Regular,
      Menlo,
      monospace
    );
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-body);
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds NarrativeSummary component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support. Also relies on
 * narrative-headline.css (headline) and eyebrow-token.css (eyebrow).
 *
 * The layout is a CSS grid driven by a container query on the root, so the
 * columns collapse based on the width the component is given, not the viewport.
 *
 * Usage:
 *   <div class="seeds-narrative-summary">
 *     <div class="seeds-narrative-summary-grid">…</div>
 *   </div>
 */

@layer components {
  /* Establishes the query container. The grid inside reacts to this element's
   inline size. */
  .seeds-narrative-summary {
    container-type: inline-size;
    box-sizing: border-box;
    font-family: var(--font-family);
  }

  /* Stacked single column by default (narrow). The container query below expands
   it once there is room. */
  .seeds-narrative-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-450); /* 24px */
  }

  /* The lead column: eyebrow, headline, optional action. align-items:flex-start
   keeps the eyebrow pill and the action sized to their content — without it the
   column's default stretch would blow the eyebrow out to full width. The
   headline still fills and wraps because its text is wider than the track. */
  .seeds-narrative-summary-lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-300); /* 8px */
    min-width: 0;
  }

  /* The headline area grows so the action anchors toward the bottom of the lead
   column when the neighboring columns are taller. align-self:stretch fills the
   track width (the lead column pins other items to flex-start) so the headline
   wraps at the column edge regardless of its length. */
  .seeds-narrative-summary-headline {
    flex: 1 1 auto;
    align-self: stretch;
  }

  /* In three-column mode the content wrapper is transparent to the grid, so its
   two sections become grid items in their own columns. In two-column mode the
   container query below turns it into a real, stacking grid item. */
  .seeds-narrative-summary-content {
    display: contents;
  }

  .seeds-narrative-summary-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-300); /* 8px */
    min-width: 0;
  }

  /* Section label. 14px / 24px has no exact type token (the scale skips from
   13px to 16px), so the design value is kept verbatim — same rationale as
   eyebrow-token.css. All other values use tokens. */
  .seeds-narrative-summary-label {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-headline);
  }

  .seeds-narrative-summary-text {
    margin: 0;
    font-size: 14px; /* off-scale, see label above */
    line-height: 24px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body);
  }

  .seeds-narrative-summary-list {
    margin: 0;
    padding-inline-start: 21px;
    list-style: disc;
    font-size: 14px; /* off-scale, see label above */
    line-height: 24px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body);
  }

  .seeds-narrative-summary-list li {
    margin: 0;
  }

  /* Expand to the multi-column layout once the component is wide enough. The
   threshold is on the component's own width (container query), so a narrow card
   on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
  @container (min-width: 640px) {
    .seeds-narrative-summary-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    /* 1/3 lead + 2/3 content. */
    .seeds-narrative-summary-two-column {
      grid-template-columns: 1fr 2fr;
    }

    /* The content wrapper becomes a real grid item that stacks its two sections. */
    .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
      display: flex;
      flex-direction: column;
      gap: var(--space-450); /* 24px */
      min-width: 0;
    }
  }
}

/* --- seeds-react-narrative-kit --- */
/**
 * Seeds PullQuote component classes.
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css and
 * ai-container.css imported for CSS variable definitions and surface styles.
 *
 * Usage:
 *   <figure class="seeds-pull-quote seeds-ai-container">…</figure>            // subtle (default)
 *   <figure class="seeds-pull-quote seeds-ai-container seeds-ai-container-vivid seeds-pull-quote-vivid">…</figure>
 */

@layer components {
  .seeds-pull-quote {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0; /* reset the browser default <figure> margin */
    /* 40px block / 48px inline — 48px is off the space scale, so derive it from
     two tokens (40 + 8) rather than hardcoding an off-scale value. */
    padding: var(--space-600) calc(var(--space-600) + var(--space-300));
  }

  /* The accented bar holding the quote and attribution. */
  .seeds-pull-quote-bar {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-450); /* 24px */
    width: 100%;
    padding-left: var(--space-450); /* 24px */
    /* 4px is off the border-width scale (max token is 3px); the bar is a
     decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
     subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
    border-left: 4px solid #9747ff;
  }

  .seeds-pull-quote-vivid .seeds-pull-quote-bar {
    border-left-color: #fff;
  }

  .seeds-pull-quote-text {
    margin: 0; /* reset the browser default <blockquote> margin */
    font-size: var(--font-size-600);
    line-height: var(--line-height-600);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    color: inherit;
    overflow-wrap: break-word;
  }

  /* Attribution row — a flex container for author name, avatar, network, etc.
   Direct text inherits a bold, small treatment to match the display-name style;
   richer content (e.g. an Avatar) composes freely. */
  .seeds-pull-quote-attribution {
    display: flex;
    align-items: center;
    gap: var(--space-300); /* 8px */
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    font-weight: var(--font-weight-bold);
    color: inherit;
  }
}

/* --- seeds-react-numeral --- */
/**
 * Seeds Numeral component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <span class="seeds-numeral">1,234</span>
 *   <span class="seeds-numeral seeds-numeral-abbr">1.2K</span>
 */

@layer components {
  .seeds-numeral {
    font-variant-numeric: tabular-nums;
  }

  .seeds-numeral-abbr {
    border-bottom: 1px dotted var(--color-container-border-base);
  }
}

/* --- seeds-react-pagination --- */
/**
 * Seeds Pagination component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Rules are wrapped in @layer components so consumer Tailwind utilities (which
 * live in @layer utilities) win the cascade. Without this layer the unlayered
 * component CSS would beat utilities like mx-200 / p-300 / inline-flex and they
 * could not override component styling. Keep every rule inside this single block
 * in source order — the -selected modifier and the :disabled overrides resolve
 * by source order within the same layer.
 */

@layer components {
  /* StyledPaginationContainer */
  .seeds-pagination-container {
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    display: flex;
    align-items: center;
    gap: var(--space-300);
    margin-top: var(--space-400);
    flex-wrap: wrap;
  }

  /* StyledPaginationInfo (styled(Text)) */
  .seeds-pagination-info {
    white-space: nowrap;
  }

  /* StyledPageSizeSelector */
  .seeds-pagination-page-size-selector {
    display: flex;
    align-items: center;
    gap: var(--space-300);
  }

  /* StyledPaginationControls */
  .seeds-pagination-controls {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  /* StyledPageButtons */
  .seeds-pagination-page-buttons {
    display: inline-flex;
    flex-flow: row wrap;
    background-clip: padding-box;
    border: 1px solid var(--color-button-secondary-border-base);
    border-radius: var(--radius-outer);
    padding: var(--space-100);
    background: transparent;
  }

  /* StyledPaginationButton — base */
  .seeds-pagination-button {
    min-width: calc(var(--space-500) + 4px);
    min-height: calc(var(--space-500) + 2px);
    padding: calc(var(--space-350) - 6px);
    line-height: var(--space-400);
    font-weight: var(--font-weight-semibold);
    background-color: transparent;
    color: var(--color-text-body);
    border: none;
    border-radius: var(--radius-inner);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* selected modifier MUST follow base (equal specificity — source order wins) */
  .seeds-pagination-button-selected {
    background-color: var(--color-button-secondary-bg-active);
    color: var(--color-text-inverse);
  }

  .seeds-pagination-button:hover:not(:disabled) {
    background-color: var(--color-listItem-bg-hover);
  }

  .seeds-pagination-button-selected:hover:not(:disabled) {
    background-color: var(--color-button-secondary-bg-active);
    color: var(--color-text-inverse);
  }

  .seeds-pagination-button:disabled {
    cursor: default;
    opacity: 0.5;
  }

  /* current page renders disabled + selected and must stay fully opaque */
  .seeds-pagination-button-selected:disabled {
    opacity: 1;
  }
}

/* --- seeds-react-panel --- */
/**
 * Seeds Panel component classes.
 * Component-scoped port of the static styled-components chrome in styles.ts.
 * Used by PanelTailwind.tsx and the Tailwind sub-component paths.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
 * CSS variable definitions (and dark mode support).
 *
 * Runtime geometry (flex-basis, the gap margin, the direction shape, and the
 * inner min-width/min-height) is applied as inline style on the elements, not
 * here — the jsdom tests assert those computed values and CSS is not loaded in
 * that environment. Only static chrome lives in these classes.
 *
 * All rules live in `@layer components` so consumer Tailwind utilities (e.g.
 * mx-200, p-300, inline-flex) win the cascade and can override these component
 * defaults, rather than tying/beating them on specificity. Unlayered rules
 * would outrank any layered utility per the CSS cascade-layers spec.
 */

@layer components {
  /* Container --------------------------------------------------------------- */

  .seeds-panel {
    background: var(--color-container-bg-base);
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-800);
    transition: flex-basis var(--duration-medium) ease-in-out,
      margin var(--duration-medium) ease-in-out;
  }

  .seeds-panel-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header ------------------------------------------------------------------ */

  .seeds-panel-header {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-400);
    border-bottom: 1px solid var(--color-container-border-base);
  }

  /* Content ----------------------------------------------------------------- */

  /* overflow-y (and, when headerless, display/flex-direction) are set inline
     by PanelContentTailwind because the tests assert them under jsdom. */
  .seeds-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-450);
    color: var(--color-text-body);
  }

  /* Headerless content renders flush; the children own all chrome/padding. */
  .seeds-panel-content--headerless {
    padding: 0;
  }

  /* Footer ------------------------------------------------------------------ */

  /* margin-bottom (var(--bleed, 0px)) is set inline by PanelFooterTailwind. */
  .seeds-panel-footer {
    flex: 0 0 auto;
    overflow: hidden;
    padding: var(--space-450);
  }

  /* Mobile actions header --------------------------------------------------- */

  .seeds-panel-mobile-actions-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-400);
    padding-left: var(--space-450);
    padding-right: var(--space-450);
  }

  .seeds-panel-mobile-actions-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-200);
  }
}

/* --- seeds-react-partner-logo --- */
/**
 * Seeds Partner Logo component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Ships as a separate CSS file (pulled in by consumers via the package css
 * export) — not imported from TS, matching the Button component.
 *
 * Sizing is runtime-computed (logo size lookup or the height prop), so it is
 * applied through inline CSS custom properties set on the element's style attr:
 *   --seeds-partner-logo-height      container height + line-height + svg height
 *   --seeds-partner-logo-svg-width   svg width (unset => auto => sizes from viewBox)
 *
 * Usage:
 *   <span class="seeds-partner-logo logo" style="--seeds-partner-logo-height: 16px">
 *     <svg class="logo-svg">…</svg>
 *   </span>
 */

@layer components {
  .seeds-partner-logo {
    display: inline-block;
    color: inherit;
    vertical-align: middle;
    height: var(--seeds-partner-logo-height);
    line-height: var(--seeds-partner-logo-height);
  }

  .seeds-partner-logo .logo-svg {
    height: var(--seeds-partner-logo-height);
    /* unset => auto => svg sizes from its viewBox aspect ratio,
       matching stylesForSize's empty width declaration */
    width: var(--seeds-partner-logo-svg-width, auto);
  }
}

/* --- seeds-react-peek-in --- */
/**
 * Seeds PeekIn component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * These classes back only the root layout wrappers PeekIn authors directly
 * (the mobile bottom-sheet header row and the desktop main column). The rest
 * of PeekIn's appearance comes from the composed Seeds primitives (Modal,
 * Drawer, Panel, Text, Button), which own their own styling.
 *
 * Rules are wrapped in @layer components so consumer Tailwind utilities (which
 * live in @layer utilities) win the cascade. Without this layer the unlayered
 * component CSS would beat utilities like px-450 / gap-300 and they could not
 * override component styling. Keep every rule inside this single block.
 */

@layer components {
  /* Mobile bottom-sheet header row (Drawer.Header render wrapper) */
  .seeds-peek-in-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-400);
    padding-right: var(--space-450);
    padding-left: var(--space-450);
    flex: 0 0 auto;
  }

  /* Desktop header row inside the main column (PeekInHeader) */
  .seeds-peek-in-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-400);
    border-bottom: 1px solid var(--color-container-border-base);
    flex: 0 0 auto;
    width: 100%;
  }

  /* Header left group: optional back button + title */
  .seeds-peek-in-titlegroup {
    display: flex;
    align-items: center;
    gap: var(--space-300);
  }

  /* Stacks the title and its optional subtitle inside the title group */
  .seeds-peek-in-titlestack {
    display: flex;
    flex-direction: column;
  }

  /* Header right group: consumer actions + inline pills/close */
  .seeds-peek-in-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-200);
  }

  /* Footer row for the main column's primary actions (PeekInFooter) */
  .seeds-peek-in-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-400);
    gap: var(--space-100);
    flex: 0 0 auto;
    width: 100%;
  }

  /* Right-aligned footer group; margin-left is what pushes it past a leftAction */
  .seeds-peek-in-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-300);
    margin-left: auto;
  }

  /* Desktop main column: header + content, alongside the optional panel */
  .seeds-peek-in-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    background: var(--color-container-bg-base);
    border-radius: var(--radius-800);
  }
}

/* --- seeds-react-profile --- */
/**
 * Seeds InlineProfile component classes
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 */

@layer components {
  .seeds-inline-profile {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-200);
    max-width: 100%;
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    color: var(--color-text-subtext);
    text-align: inherit;
  }

  .seeds-inline-profile-avatar {
    display: inline-flex;
    flex-shrink: 0;
  }

  .seeds-inline-profile-content {
    display: inline-flex;
    align-items: center;
    gap: var(--space-200);
    min-width: 0;
    flex: 1;
  }

  .seeds-inline-profile-network {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .seeds-inline-profile-text {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-200);
    min-width: 0;
    flex: 1;
  }

  .seeds-inline-profile-name {
    display: inline-block;
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seeds-inline-profile-handle {
    display: inline-block;
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    font-family: var(--font-family);
    color: var(--color-text-subtext);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --- seeds-react-profile --- */
/**
 * Seeds ProfileCard component classes
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * The header background color is dynamic (consumer bannerColor or the network
 * color for the partner) and is supplied via the
 * --seeds-profile-card-banner-bg custom property set as an inline style on the
 * header element; the background declaration below consumes it.
 */

@layer components {
  .seeds-profile-card {
    max-width: 300px;
    border-radius: var(--radius-500);
    background-color: var(--color-container-bg-base);
    border: 1px solid var(--color-container-border-base);
  }

  .seeds-profile-card-header {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 80px;
    padding: var(--space-400) var(--space-400) 0 var(--space-400);
    margin-bottom: 0;
    color: var(--color-text-inverse);
    background: var(--seeds-profile-card-banner-bg, transparent);
    border-radius: var(--radius-500) var(--radius-500) 0 0;
  }

  .seeds-profile-card-footer {
    border-top: 1px solid var(--color-container-border-base);
    border-radius: 0 0 var(--radius-500) var(--radius-500);
    padding: var(--space-400);
  }

  .seeds-profile-card-banner-content {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  .seeds-profile-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-100);
    padding: 0 var(--space-300);
  }

  .seeds-profile-card-actions:empty {
    min-height: 44px;
  }

  .seeds-profile-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
    padding: 0 var(--space-400) var(--space-400);
  }

  .seeds-profile-card-name-section {
    display: flex;
    align-items: center;
    gap: var(--space-200);
  }

  .seeds-profile-card-info-row {
    display: flex;
    align-items: center;
    gap: var(--space-300);
  }
}

/* --- seeds-react-profile --- */
/**
 * Seeds ProfileToken component classes
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 */

@layer components {
  /*
   * The rendered element carries both .seeds-token (from Token) and
   * .seeds-profile-token at equal specificity, so the tighter profile padding
   * would otherwise depend on CSS concatenation order. The compound selector
   * raises specificity so this override deterministically wins over .seeds-token.
   */
  .seeds-token.seeds-profile-token {
    box-sizing: border-box;
    display: inline-flex;
    max-width: 100%;
    vertical-align: middle;
    padding: var(--space-100) var(--space-200);
    margin: var(--space-100) 0;
  }
}

/* --- seeds-react-progress --- */
/**
 * Seeds Progress component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="Progress seeds-progress"><div class="seeds-progress-indicator" /></div>
 */

@layer components {
  .seeds-progress {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-outer);
    background-color: var(--color-container-border-base);
  }

  .seeds-progress-indicator {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-outer);
    background-color: var(--color-icon-base);
    transition: transform 150ms ease;
  }
}

/* --- seeds-react-radio --- */
/**
 * Seeds Radio component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <label class="seeds-radio">
 *     <span class="seeds-radio-wrapper seeds-radio-checked">
 *       <input type="radio" class="seeds-radio-input" />
 *     </span>
 *     <span class="seeds-radio-label">Label</span>
 *   </label>
 */

@layer components {
  .seeds-radio {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }

  .seeds-radio-wrapper {
    position: relative;
    width: var(--space-400);
    height: var(--space-400);
    cursor: pointer;
  }

  .seeds-radio-wrapper.seeds-radio-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
  }

  .seeds-radio-input {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--color-form-border-base);
    border-radius: 50%;
    background-color: var(--color-form-bg-base);
    transition: border-color var(--duration-fast) ease-in,
      background-color var(--duration-fast) ease-in;
  }

  /* Focus ring mirrors button.css (the CSS form of the focusRing mixin) */
  .seeds-radio-input:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0 0 4px
        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
  }

  .seeds-radio-wrapper:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--duration-fast) ease-in;
    z-index: 1;
    pointer-events: none;
  }

  /* Unchecked hover / focus: show the dot (only when NOT checked) */
  .seeds-radio-wrapper:not(.seeds-radio-checked):hover .seeds-radio-input,
  .seeds-radio-wrapper:not(.seeds-radio-checked):focus-within
    .seeds-radio-input {
    border-color: var(--color-form-border-base);
    background-color: var(--color-form-bg-base);
  }

  .seeds-radio-wrapper:not(.seeds-radio-checked):hover:before,
  .seeds-radio-wrapper:not(.seeds-radio-checked):focus-within:before {
    opacity: 1;
    background-color: var(--color-form-bg-base);
  }

  /* Disabled-unchecked keeps the hover dot hidden (parity with opacity: disabled ? 0 : 1) */
  .seeds-radio-wrapper.seeds-radio-disabled:not(
      .seeds-radio-checked
    ):hover:before {
    opacity: 0;
  }

  /* Checked state */
  .seeds-radio-wrapper.seeds-radio-checked .seeds-radio-input {
    border-color: var(--color-form-border-selected);
    /* No --color-form-bg-selected token exists; form.background.selected resolves
       to the same value as form.border.selected in both light and dark themes. */
    background-color: var(--color-form-border-selected);
  }

  .seeds-radio-wrapper.seeds-radio-checked:before {
    opacity: 1;
    background-color: var(--color-form-bg-base);
  }

  .seeds-radio-label {
    margin-left: var(--space-300);
    font-size: var(--font-size-200);
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-headline);
  }

  .seeds-radio.seeds-radio-disabled .seeds-radio-label {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

/* --- seeds-react-rating --- */
@layer components {
  .seeds-rating {
    display: flex;
    align-items: center;
  }
}

/* --- seeds-react-segmented-control --- */
/**
 * Seeds SegmentedControl component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support. Dark mode works
 * automatically because the variables below are redefined under
 * [data-theme="dark"] in theme-all.css.
 *
 * Usage:
 *   <div class="seeds-segmented-control">
 *     <button class="seeds-segmented-control-item" data-state="on">One</button>
 *     <button class="seeds-segmented-control-item" data-state="off">Two</button>
 *   </div>
 */

/* Rules live in the Tailwind `components` cascade layer so that consumer
   utility classes (which Tailwind v4 emits in the later `utilities` layer, or
   unlayered) can override the component's own styles. Without this layer the
   unlayered component rules would always win the cascade and classes like
   `p-300`, `mx-200`, or `inline-flex` could not override them. */
@layer components {
  .seeds-segmented-control {
    display: flex;
    border: 1px solid var(--color-button-secondary-border-base);
    border-radius: var(--radius-outer);
    padding: var(--space-100);
    font-family: var(--font-family);
  }

  .seeds-segmented-control-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .seeds-segmented-control-item {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0;
    cursor: pointer;
    color: var(--color-text-body);
    background: transparent;
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-semibold);
    /* Matches default line height of Icon. Also matches the overall height of
       Input, Select, and Button. */
    line-height: 16px;
    border-radius: var(--radius-inner);
    /* To match the height of buttons... 350 padding - 2px top and bottom padding
       of the parent - 1px border on top and bottom */
    padding: calc(var(--space-350) - 6px);
    transition: all var(--duration-fast);
  }

  .seeds-segmented-control-item + .seeds-segmented-control-item {
    margin-left: var(--space-100);
  }

  .seeds-segmented-control-item:hover {
    background-color: var(--color-listItem-bg-hover);
  }

  .seeds-segmented-control-item[data-state="on"] {
    color: var(--color-text-inverse);
    background-color: var(--color-listItem-bg-selected);
  }

  .seeds-segmented-control-item[data-state="on"]:hover {
    background-color: var(--color-listItem-bg-selected);
  }

  .seeds-segmented-control-item:disabled,
  .seeds-segmented-control-item[data-disabled] {
    opacity: 0.4;
    pointer-events: none;
  }
}

/* --- seeds-react-select --- */
/**
 * Seeds Select component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-select seeds-select-default">
 *     <select class="seeds-select-input">…</select>
 *     <span class="seeds-select-arrow seeds-select-arrow-default">…</span>
 *   </div>
 */

@layer components {
  .seeds-select {
    position: relative;
    box-sizing: border-box;
  }

  .seeds-select .seeds-select-input {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--color-form-border-base);
    border-radius: var(--radius-500);
    background-color: var(--color-form-bg-base);
    color: var(--color-text-body);
    cursor: pointer;
    outline: none;
    appearance: none;
    transition: border-color var(--duration-fast) var(--ease-ease_in),
      box-shadow var(--duration-fast) var(--ease-ease_in);
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    margin: 0;
    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
    visibility: visible;
  }

  /* kill the dropdown arrow on IE 11 */
  .seeds-select .seeds-select-input::-ms-expand {
    display: none;
  }

  .seeds-select .seeds-select-input:focus {
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0px 0px 4px
        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
    outline: none;
  }

  /* Fix for red ring when input is marked required in Firefox */
  .seeds-select .seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
    box-shadow: none;
  }

  /* size: default */
  .seeds-select-default .seeds-select-input {
    padding: var(--space-300) var(--space-500) var(--space-300) var(--space-300);
    font-size: var(--font-size-200);
    line-height: normal;
  }

  /* size: large */
  .seeds-select-large .seeds-select-input {
    padding: var(--space-350) var(--space-600) var(--space-350) var(--space-400);
    font-size: var(--font-size-300);
    line-height: var(--line-height-300);
  }

  /* size: small */
  .seeds-select-small .seeds-select-input {
    padding: var(--space-200) var(--space-500) var(--space-200) var(--space-200);
    font-size: var(--font-size-200);
    line-height: normal;
  }

  .seeds-select-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-icon-base);
    pointer-events: none;
  }

  .seeds-select-arrow-default,
  .seeds-select-arrow-small {
    right: var(--space-300);
  }

  .seeds-select-arrow-large {
    right: var(--space-350);
  }

  /* disabled */
  .seeds-select-disabled {
    opacity: 0.4;
  }

  .seeds-select-disabled .seeds-select-input {
    cursor: not-allowed;
  }

  /* invalid */
  .seeds-select-invalid .seeds-select-input {
    border-color: var(--color-form-border-error);
  }

  .seeds-select-invalid .seeds-select-arrow {
    color: var(--color-icon-error);
  }
}

/* --- seeds-react-skeleton --- */
/**
 * Seeds Skeleton component classes
 * Static reproduction of the styled-components Skeleton visuals.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-skeleton circular" style="width:48px;height:48px"></div>
 *   <div class="seeds-skeleton linear" style="width:100%;height:16px"></div>
 *
 * The `--skeleton-radius` custom property (set inline from the `borderRadius`
 * prop) controls corner rounding for the linear surface; the circular variant
 * masks its own shape.
 */

@layer components {
  .seeds-skeleton {
    position: relative;
    background: var(--color-container-bg-decorative-neutral);
    overflow: hidden;
    border-radius: var(--skeleton-radius, 0);
  }

  .seeds-skeleton.circular::before {
    position: absolute;
    top: -25%;
    left: -25%;
    content: "";
    background-image: conic-gradient(
      var(--color-container-bg-decorative-neutral) 270deg,
      var(--color-container-border-decorative-neutral) 300deg
    );
    height: 150%;
    width: 150%;
    animation: SkeletonRotate 2s infinite linear;
  }

  .seeds-skeleton.circular::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    background: var(--color-app-bg-base);
    border-radius: 50%;
  }

  .seeds-skeleton.linear {
    position: relative;
    background-image: linear-gradient(
      288deg,
      var(--color-container-bg-decorative-neutral) 32%,
      var(--color-container-border-decorative-neutral),
      var(--color-container-bg-decorative-neutral) 68%
    );
    background-size: 400%;
    background-repeat: no-repeat;
    animation: SkeletonShimmer 2s linear infinite reverse;
    overflow: hidden;
  }

  .seeds-skeleton.linear::after {
    position: absolute;
    bottom: 0;
    content: "";
    height: calc(100% - 4px);
    width: 100%;
    background: var(--color-container-bg-decorative-neutral);
  }

  @media (prefers-reduced-motion) {
    .seeds-skeleton.linear,
    .seeds-skeleton.circular::before {
      animation: none;
    }
    .seeds-skeleton::before,
    .seeds-skeleton::after {
      display: none;
    }
    .seeds-skeleton.linear,
    .seeds-skeleton.circular {
      border: 1px solid var(--color-container-border-decorative-neutral);
      animation: SkeletonPulse 2s linear infinite alternate;
    }
  }
}

@keyframes SkeletonRotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes SkeletonShimmer {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/*
 * The styled-components original faded the border via hex-alpha concatenation
 * (…neutral + "FF" → "1A"); that string trick does not translate to var(--…),
 * so the fade is reproduced with color-mix (≈10% alpha matches 0x1A).
 */
@keyframes SkeletonPulse {
  0% {
    border-color: var(--color-container-border-decorative-neutral);
  }
  100% {
    border-color: color-mix(
      in srgb,
      var(--color-container-border-decorative-neutral) 10%,
      transparent
    );
  }
}

/* --- seeds-react-spot-illustration --- */
/**
 * Seeds SpotIllustration component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <svg class="seeds-spot-illustration seeds-spot-illustration-red">…</svg>
 */

@layer components {
  .seeds-spot-illustration {
    fill: var(--color-illustration-fill);
    color: var(--color-illustration-stroke);
  }

  .seeds-spot-illustration-red {
    fill: var(--color-red-400);
  }

  .seeds-spot-illustration-green {
    fill: var(--color-green-400);
  }

  .seeds-spot-illustration-yellow {
    fill: var(--color-yellow-400);
  }

  .seeds-spot-illustration-magenta {
    fill: var(--color-magenta-400);
  }

  .seeds-spot-illustration-purple {
    fill: var(--color-purple-400);
  }

  .seeds-spot-illustration-aqua {
    fill: var(--color-aqua-400);
  }
}

/* --- seeds-react-stack --- */
/**
 * Seeds Stack component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-stack seeds-stack-vertical seeds-stack-align-left seeds-stack-space-300">…</div>
 */

/*
 * Wrapped in @layer components so consumer Tailwind utilities (which live in
 * @layer utilities, ordered after components) can override these component
 * styles. Unlayered rules would always win the cascade regardless of source
 * order, preventing overrides like className="inline-flex mx-200".
 */
@layer components {
  .seeds-stack {
    display: flex;
  }

  .seeds-stack-vertical {
    flex-direction: column;
  }

  .seeds-stack-horizontal {
    flex-direction: row;
    align-items: center;
  }

  /* vertical: align controls the cross axis (align-items) */
  .seeds-stack-vertical.seeds-stack-align-left {
    align-items: flex-start;
  }

  .seeds-stack-vertical.seeds-stack-align-center {
    align-items: center;
  }

  .seeds-stack-vertical.seeds-stack-align-right {
    align-items: flex-end;
  }

  .seeds-stack-vertical.seeds-stack-align-stretch {
    align-items: stretch;
  }

  /* horizontal: align-items stays center; align controls justify-content */
  .seeds-stack-horizontal.seeds-stack-align-center {
    justify-content: center;
  }

  .seeds-stack-horizontal.seeds-stack-align-right {
    justify-content: flex-end;
  }

  /* stretch + horizontal: stretch each child to fill (replicates flexBasis: 100%) */
  .seeds-stack-horizontal.seeds-stack-align-stretch > * {
    flex-basis: 100%;
  }

  /* spacing via gap (replaces the per-child margins of the styled-components path) */
  .seeds-stack-space-0 {
    gap: var(--space-0);
  }

  .seeds-stack-space-100 {
    gap: var(--space-100);
  }

  .seeds-stack-space-200 {
    gap: var(--space-200);
  }

  .seeds-stack-space-300 {
    gap: var(--space-300);
  }

  .seeds-stack-space-350 {
    gap: var(--space-350);
  }

  .seeds-stack-space-400 {
    gap: var(--space-400);
  }

  .seeds-stack-space-450 {
    gap: var(--space-450);
  }

  .seeds-stack-space-500 {
    gap: var(--space-500);
  }

  .seeds-stack-space-600 {
    gap: var(--space-600);
  }
}

/* --- seeds-react-switch --- */
/**
 * Seeds Switch component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <button class="seeds-switch" role="switch" aria-checked="true"></button>
 *   <button class="seeds-switch loading" role="switch" aria-checked="false"></button>
 */

@layer components {
  .seeds-switch {
    position: relative;
    display: inline-flex;
    align-self: center;
    width: 40px;
    height: 24px;
    margin: 0;
    padding: var(--space-100) var(--space-200);
    vertical-align: middle;
    appearance: none;
    background-color: var(--color-form-bg-base);
    border-radius: 16px;
    outline: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-ease_inout);
    border: 1px solid var(--color-form-border-base);
    white-space: nowrap;
    overflow: hidden;
  }

  /* Mixin for styled focus ring — copied from button.css:34-39 */
  .seeds-switch:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0 0 4px
        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
  }

  /* Base styles for circle element */
  .seeds-switch[aria-checked]::after {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    content: "";
    transition: transform var(--duration-fast) var(--ease-ease_inout);
  }

  .seeds-switch[aria-checked].loading {
    cursor: not-allowed;
    pointer-events: none;
    background-size: contain;
    background-color: var(--color-form-bg-base);
  }

  .seeds-switch[aria-checked].loading::after {
    position: absolute;
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    border: 3px dotted var(--color-icon-base);
    background-color: transparent;
    animation: seeds-switch-loading 2s linear infinite;
  }

  /* Checked State */
  .seeds-switch[aria-checked="true"] {
    color: var(--color-text-body);
    text-align: left;
    border-color: var(--color-form-border-selected);
    background-color: var(--color-form-bg-selected);
  }

  .seeds-switch[aria-checked="true"] .Icon {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translate(0, -50%);
    color: var(--color-icon-inverse);
  }

  .seeds-switch[aria-checked="true"]::after {
    background-color: var(--color-icon-inverse);
    opacity: 1;
    transform: translate(100%, 6%);
  }

  .seeds-switch[aria-checked="true"].loading::after {
    top: 4px;
    right: 5px;
  }

  .seeds-switch[aria-checked="true"]:hover::after,
  .seeds-switch[aria-checked="true"]:focus::after {
    transform: translate(90%, 6%);
  }

  /* Unchecked State */
  .seeds-switch[aria-checked="false"]::after {
    background-color: var(--color-icon-base);
    opacity: 0.64;
    transform: translate(0%, 6%);
  }

  .seeds-switch[aria-checked="false"].loading::after {
    top: 4px;
    left: 5px;
  }

  .seeds-switch[aria-checked="false"]:hover::after,
  .seeds-switch[aria-checked="false"]:focus::after {
    transform: translate(10%, 6%);
  }

  /* Disabled State Styles */
  .seeds-switch:disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
  }

  .seeds-switch:disabled[aria-checked="true"]:hover,
  .seeds-switch:disabled[aria-checked="true"]:focus {
    background-color: var(--color-container-bg-selected);
  }

  @keyframes seeds-switch-loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

/* --- seeds-react-table --- */
/**
 * Seeds v2 Table component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-table-v2-container" role="region" tabindex="0">
 *     <table class="seeds-table-v2">
 *       <caption class="seeds-table-v2-caption">Caption</caption>
 *       <thead class="seeds-table-v2-header">
 *         <tr class="seeds-table-v2-row">
 *           <th class="seeds-table-v2-header-cell" scope="col">Header</th>
 *         </tr>
 *       </thead>
 *       <tbody class="seeds-table-v2-body">
 *         <tr class="seeds-table-v2-row">
 *           <td class="seeds-table-v2-cell">Data</td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 *
 * All rules are wrapped in `@layer components` so that consumer Tailwind
 * utilities (unlayered) win the cascade over these styles.
 */

@layer components {
  .seeds-table-v2-container {
    overflow-x: auto;
    max-width: 100%;
  }

  .seeds-table-v2 {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text-body);
    font-family: var(--font-family);
  }

  .seeds-table-v2-caption {
    text-align: left;
    font-size: var(--font-size-400);
    line-height: var(--line-height-400);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-300);
    margin-top: var(--space-200);
  }

  .seeds-table-v2-caption-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .seeds-table-v2-header {
    vertical-align: bottom;
    border-bottom: 1px solid var(--color-container-border-base);
  }

  .seeds-table-v2-row {
    border-bottom: 1px solid var(--color-container-border-base);
  }

  .seeds-table-v2-header-cell {
    font-size: var(--font-size-100);
    line-height: var(--line-height-100);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-300);
    text-align: left;
    min-width: 0;
  }

  .seeds-table-v2-cell {
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    font-weight: var(--font-weight-normal);
    padding: var(--space-300);
    text-align: left;
  }
}

/* --- seeds-react-tabs --- */
/**
 * Seeds Tabs component classes
 * CSS-class implementation of the tab list container and tab buttons, mirroring
 * the styled-components version in styles.ts. Used by the Tailwind path of the
 * hybrid Tabs component.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support. Tab buttons render on top of
 * the .seeds-btn / .seeds-btn-unstyled classes from button.css — both files
 * are in `@layer components`, so source order (tabs imported after button)
 * determines which overrides win.
 *
 * All rules are wrapped in `@layer components` so consumer Tailwind utilities
 * (which are unlayered) win the cascade over these component styles. Without the
 * layer, equal-specificity utilities like `mx-200`, `p-300`, or `inline-flex`
 * would be decided by source order and could silently lose to the component CSS.
 */

@layer components {
  .seeds-tab-container {
    display: inline-flex;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    min-height: min-content;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-padding-inline: 48px;
    scroll-behavior: smooth;
    border-bottom: 1px solid var(--color-container-border-base);
  }

  .seeds-tab-container-fullwidth {
    display: flex;
  }

  .seeds-tab-container::-webkit-scrollbar {
    display: none;
  }

  .seeds-tab-container[data-fade-right] {
    -webkit-mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - 48px),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - 48px),
      transparent
    );
  }

  .seeds-tab-container[data-fade-left] {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 48px,
      black 100%
    );
    mask-image: linear-gradient(to right, transparent, black 48px, black 100%);
  }

  .seeds-tab-container[data-fade-left][data-fade-right] {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 48px,
      black calc(100% - 48px),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      black 48px,
      black calc(100% - 48px),
      transparent
    );
  }

  .seeds-tab-button {
    margin-bottom: -1px;
    padding: var(--space-350) var(--space-350);
    color: var(--color-text-headline);
    border-radius: 0;
    border-width: 0 0 3px;
    /* Reserve the 3px indicator while keeping it invisible until selected, so
       selecting a tab causes no layout shift (matches the styled-components path,
       which inherits transparent borders from .seeds-btn-unstyled). */
    border-color: transparent;
    width: 100%;
  }

  .seeds-tab-button-fullwidth {
    flex-grow: 1;
    padding-left: 0;
    padding-right: 0;
  }

  .seeds-tab-button-selected {
    color: var(--color-link-base);
    border-color: transparent transparent var(--color-button-primary-bg-base);
  }

  .seeds-tab-button-selected:hover {
    color: var(--color-link-hover);
  }

  .seeds-tab-button:focus,
  .seeds-tab-button:active {
    box-shadow: none;
  }

  .seeds-tab-button:active {
    transform: none;
  }
}

/* --- seeds-react-text --- */
/**
 * Seeds Text component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Rules live in the Tailwind `components` layer so consumer utility classes
 * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
 */

@layer components {
  .seeds-text {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--font-family);
  }

  .seeds-text-italic {
    font-style: italic;
  }

  .seeds-text-truncated {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .seeds-text-break-word {
    word-break: break-word;
    hyphens: auto;
  }

  .seeds-text-headline {
    color: var(--color-text-headline);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-400);
    line-height: var(--line-height-400);
  }

  .seeds-text-subheadline {
    color: var(--color-text-headline);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-300);
    line-height: var(--line-height-300);
  }

  .seeds-text-small-subheadline {
    color: var(--color-text-headline);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
  }

  .seeds-text-byline {
    color: var(--color-text-subtext);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
  }

  .seeds-text-small-byline {
    color: var(--color-text-subtext);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-100);
    line-height: var(--line-height-100);
  }

  .seeds-text-body {
    color: var(--color-text-body);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-300);
    line-height: var(--line-height-300);
  }

  .seeds-text-small-body {
    color: var(--color-text-body);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
  }
}

/* --- seeds-react-textarea --- */
/**
 * Seeds Textarea component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-textarea">
 *     <textarea class="seeds-textarea-input"></textarea>
 *   </div>
 */

@layer components {
  .seeds-textarea {
    box-sizing: border-box;
    position: relative;
  }

  .seeds-textarea-disabled {
    opacity: 0.4;
  }

  .seeds-textarea-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: var(--space-300);
    border: 1px solid var(--color-form-border-base);
    border-radius: var(--radius-500);
    background-color: var(--color-form-bg-base);
    color: var(--color-text-body);
    outline: none;
    resize: none;
    transition-property: border-color, box-shadow;
    transition-duration: var(--duration-fast);
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    font-weight: var(--font-weight-normal);
    appearance: none;
  }

  .seeds-textarea-input:focus {
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0 0 4px
        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
    outline: none;
  }

  .seeds-textarea-input::placeholder {
    color: var(--color-form-placeholder-base);
    font-style: italic;
  }

  .seeds-textarea-input-resizable {
    resize: vertical;
  }

  .seeds-textarea-input-before {
    padding-left: 40px;
  }

  .seeds-textarea-input-after {
    padding-right: 40px;
  }

  .seeds-textarea-input-disabled {
    cursor: not-allowed;
  }

  .seeds-textarea-input-invalid {
    border-color: var(--color-form-border-error);
  }

  .seeds-textarea-accessory {
    position: absolute;
    color: var(--color-icon-base);
  }

  .seeds-textarea-accessory-before {
    top: var(--space-300);
    left: var(--space-350);
  }

  .seeds-textarea-accessory-after {
    right: var(--space-350);
    bottom: var(--space-300);
  }
}

/* --- seeds-react-token --- */
/**
 * Seeds Token component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <button class="seeds-token seeds-token-closeable">Token</button>
 */

@layer components {
  .seeds-token {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    outline: none;
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: 13px;
    font-weight: var(--font-weight-normal);
    border: 1px solid var(--color-container-border-base);
    border-radius: var(--radius-500);
    color: var(--color-text-body);
    background: var(--color-container-bg-base);
    padding: var(--space-200) var(--space-300);
    transition: all var(--duration-fast) var(--ease-ease_inout);
  }

  .seeds-token:focus {
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0px 0px 4px
        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
    outline: none;
  }

  .seeds-token::-moz-focus-inner {
    border: 0;
  }

  /* closeable / clickable */
  .seeds-token-closeable {
    cursor: pointer;
  }

  .seeds-token-closeable:hover,
  .seeds-token-closeable:active {
    box-shadow: var(--shadow-low);
    border: 1px solid
      color-mix(in srgb, var(--color-container-border-base), black 20%);
  }

  /* palette="blue" */
  .seeds-token-blue {
    background: var(--color-container-bg-decorative-blue);
    border: 1px solid var(--color-container-border-decorative-blue);
  }

  .seeds-token-blue:hover,
  .seeds-token-blue:active {
    cursor: pointer;
    box-shadow: var(--shadow-low);
    border: 1px solid
      color-mix(
        in srgb,
        var(--color-container-border-decorative-blue),
        black 20%
      );
  }

  /* disabled */
  .seeds-token-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .seeds-token-disabled:hover,
  .seeds-token-disabled:active {
    box-shadow: none;
    border: 1px solid var(--color-container-border-base);
  }

  /* valid={false} */
  .seeds-token-invalid {
    color: var(--color-text-error);
    background: var(--color-container-bg-error);
    border: 1px solid var(--color-container-border-error);
  }

  .seeds-token-invalid:hover {
    box-shadow: var(--shadow-low);
    border: 1px solid
      color-mix(in srgb, var(--color-container-border-error), black 20%);
  }

  /* hasWarning */
  .seeds-token-warning {
    background: var(--color-container-bg-warning);
    border: 1px solid var(--color-container-border-warning);
  }

  .seeds-token-warning:hover {
    box-shadow: var(--shadow-low);
    border: 1px solid
      color-mix(in srgb, var(--color-container-border-warning), black 20%);
  }

  /* isGenerated (AI) */
  .seeds-token-generated {
    background: var(--color-container-bg-ai_generated);
    border: 1px solid var(--color-container-border-ai_generated);
    color: var(--color-text-ai_generated);
  }

  .seeds-token-generated:hover {
    box-shadow: var(--shadow-low);
    border: 1px solid
      color-mix(in srgb, var(--color-container-border-ai_generated), black 20%);
  }

  /* Dark mode: useInteractiveColor lightens (white) instead of darkening (black). */
  [data-theme="dark"] .seeds-token-closeable:hover,
  [data-theme="dark"] .seeds-token-closeable:active,
  .dark .seeds-token-closeable:hover,
  .dark .seeds-token-closeable:active,
  .lights-out .seeds-token-closeable:hover,
  .lights-out .seeds-token-closeable:active {
    border: 1px solid
      color-mix(in srgb, var(--color-container-border-base), white 20%);
  }

  [data-theme="dark"] .seeds-token-blue:hover,
  [data-theme="dark"] .seeds-token-blue:active,
  .dark .seeds-token-blue:hover,
  .dark .seeds-token-blue:active,
  .lights-out .seeds-token-blue:hover,
  .lights-out .seeds-token-blue:active {
    border: 1px solid
      color-mix(
        in srgb,
        var(--color-container-border-decorative-blue),
        white 20%
      );
  }

  [data-theme="dark"] .seeds-token-invalid:hover,
  .dark .seeds-token-invalid:hover,
  .lights-out .seeds-token-invalid:hover {
    border: 1px solid
      color-mix(in srgb, var(--color-container-border-error), white 20%);
  }

  [data-theme="dark"] .seeds-token-warning:hover,
  .dark .seeds-token-warning:hover,
  .lights-out .seeds-token-warning:hover {
    border: 1px solid
      color-mix(in srgb, var(--color-container-border-warning), white 20%);
  }

  [data-theme="dark"] .seeds-token-generated:hover,
  .dark .seeds-token-generated:hover,
  .lights-out .seeds-token-generated:hover {
    border: 1px solid
      color-mix(in srgb, var(--color-container-border-ai_generated), white 20%);
  }
}

/* --- seeds-react-tooltip --- */
/**
 * Seeds Tooltip component classes
 * Use these instead of writing out individual Tailwind utility classes.
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Usage:
 *   <div class="seeds-tooltip seeds-tooltip-pill" role="tooltip">Label</div>
 *   <div class="seeds-tooltip seeds-tooltip-box" role="tooltip">Rich content</div>
 */

@layer components {
  .seeds-tooltip {
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    margin: var(--space-200);
    padding-left: var(--space-400);
    padding-right: var(--space-400);
    color: var(--color-text-body);
    background-color: var(--color-container-bg-base);
    border: 1px solid var(--color-container-border-base);
    box-shadow: var(--shadow-medium);
  }

  .seeds-tooltip-box {
    text-align: left;
    border-radius: var(--radius-500);
    padding-top: var(--space-400);
    padding-bottom: var(--space-400);
  }

  .seeds-tooltip-pill {
    text-align: center;
    border-radius: 5000em;
    padding-top: var(--space-200);
    padding-bottom: var(--space-200);
  }
}

/* --- seeds-react-tree --- */
/**
 * Seeds Tree component classes
 * CSS-class mirror of the styled-components that previously styled the tree
 * package (TreeStyles.tsx, TreeCombobox.tsx, Common/TreeSearchableSelectBase.tsx).
 *
 * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
 * CSS variable definitions and dark mode support.
 *
 * Rules live in @layer components so consumer Tailwind utilities (which sit in
 * the later `utilities` layer) can override component styles on equal
 * specificity. Without the layer, these unlayered rules would out-rank any
 * utility class.
 *
 * Usage:
 *   <ul class="seeds-tree" role="tree">
 *     <li class="seeds-tree-item" role="treeitem">
 *       <div class="seeds-tree-item-row" style="--tree-level: 1">…</div>
 *     </li>
 *   </ul>
 */

@layer components {
  /* ---------------------------------------------------------------------- */
  /* Tree / TreeItem (mirror of TreeStyles.tsx)                             */
  /* ---------------------------------------------------------------------- */

  .seeds-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    color: var(--color-text-body);
  }

  .seeds-tree-item {
    list-style: none;
    outline: none;
  }

  /*
   * Tree rows stack tightly, so the standard outset Seeds focusRing bleeds
   * into adjacent rows. Use an inset outline so the ring is drawn just inside
   * the row's edge and never overlaps siblings or children.
   *
   * The same ring is drawn when [data-treeitem-active] is set so combobox
   * hosts that drive the tree via aria-activedescendant (no real DOM focus)
   * still get a visible "active" indicator on the row.
   */
  .seeds-tree-item:focus-visible > .seeds-tree-item-row,
  .seeds-tree-item[data-treeitem-active] > .seeds-tree-item-row {
    outline: 2px solid var(--color-button-primary-bg-base);
    outline-offset: -2px;
  }

  .seeds-tree-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-300);
    padding: var(--space-300);
    /* Indentation per depth: --tree-level is set inline on each row. */
    padding-left: calc(
      var(--space-300) + (var(--tree-level) - 1) * var(--space-400)
    );
    border-radius: var(--radius-400);
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background-color var(--duration-fast) var(--ease-ease_in);
  }

  .seeds-tree-item-row:hover {
    background: var(--color-listItem-bg-hover);
  }

  .seeds-tree-item-row.selected {
    background: var(--color-listItem-bg-hover);
    font-weight: var(--font-weight-semibold);
  }

  .seeds-tree-item-row.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  .seeds-tree-item-group {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .seeds-tree-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seeds-tree-item-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .seeds-tree-item-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-500);
    height: var(--space-500);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-icon-base);
    cursor: pointer;
    border-radius: var(--radius-300);
    transition: transform var(--duration-fast) var(--ease-ease_in);
    transform: rotate(-90deg);
  }

  .seeds-tree-item-chevron.expanded {
    transform: rotate(0deg);
  }

  .seeds-tree-item-chevron:hover {
    background: var(--color-listItem-bg-hover);
  }

  /* ---------------------------------------------------------------------- */
  /* TreeCombobox (mirror of TreeCombobox.tsx)                              */
  /* ---------------------------------------------------------------------- */

  .seeds-tree-combobox {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .seeds-tree-combobox-search {
    padding: var(--space-300);
    border-bottom: 1px solid var(--color-container-border-base);
    flex-shrink: 0;
  }

  .seeds-tree-combobox-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-200);
    padding: var(--space-200) var(--space-300);
    border-radius: var(--radius-500);
    border: 1px solid var(--color-container-border-base);
    background: var(--color-container-bg-base);
    color: var(--color-icon-base);
  }

  .seeds-tree-combobox-input-group:focus-within {
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0px 0px 4px
        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
    outline: none;
  }

  .seeds-tree-combobox-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    color: var(--color-text-body);
  }

  .seeds-tree-combobox-input::placeholder {
    color: var(--color-text-subtext);
  }

  .seeds-tree-combobox-list {
    padding: var(--space-200);
    overflow: auto;
    flex: 1;
    min-height: 0;
  }

  .seeds-tree-combobox-empty {
    padding: var(--space-300) var(--space-350);
    text-align: center;
    color: var(--color-text-subtext);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
  }

  /* ---------------------------------------------------------------------- */
  /* TreeSearchableSelect (mirror of Common/TreeSearchableSelectBase.tsx)   */
  /* ---------------------------------------------------------------------- */

  .seeds-tree-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-300);
    padding: var(--space-200) var(--space-350);
    min-width: 160px;
    width: auto;
    border-radius: var(--radius-500);
    border: 1px solid var(--color-form-border-base);
    background: var(--color-form-bg-base);
    font-family: var(--font-family);
    font-size: var(--font-size-200);
    line-height: var(--line-height-200);
    color: var(--color-text-body);
    text-align: left;
    cursor: default;
    outline: none;
    user-select: none;
    transition: border-color var(--duration-fast) var(--ease-ease_in),
      box-shadow var(--duration-fast) var(--ease-ease_in);
  }

  .seeds-tree-select-trigger.full-width {
    width: 100%;
  }

  .seeds-tree-select-trigger:focus-visible {
    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
      0 0px 0px 4px
        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
    outline: none;
  }

  .seeds-tree-select-trigger::-moz-focus-inner {
    border: 0;
  }

  .seeds-tree-select-trigger[aria-disabled="true"],
  .seeds-tree-select-trigger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .seeds-tree-select-trigger.invalid {
    border-color: var(--color-form-border-error);
  }

  .seeds-tree-select-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seeds-tree-select-placeholder {
    color: var(--color-text-subtext);
  }

  .seeds-tree-select-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--color-icon-base);
    transition: transform var(--duration-fast) var(--ease-ease_in);
  }

  .seeds-tree-select-chevron.open {
    transform: rotate(-180deg);
  }

  /*
   * Visually-hidden input that mirrors the combobox's selected value into a
   * form-submittable element. Matches Base UI's pattern (used by v3
   * SearchableSelect): the input stays in the DOM so HTML forms pick up the
   * value, but it's removed from view and from the accessibility tree.
   */
  .seeds-tree-select-hidden-input {
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    position: fixed;
    top: 0;
    left: 0;
  }

  .seeds-tree-select-popout {
    display: flex;
    flex-direction: column;
    /* Width sizes to content within bounds: at least the trigger width, never */
    /* wider than the available viewport space. Shallow popups stay flush with */
    /* the trigger; deeply nested trees expand horizontally as needed. */
    min-width: var(--radix-popover-trigger-width);
    max-width: var(--radix-popper-available-width);
    /* Height caps at 400px (or available viewport) so a popup with many */
    /* expanded branches scrolls vertically instead of growing off-screen. */
    max-height: min(var(--radix-popper-available-height), 400px);
    /* Width is set inline via --tree-select-width (defaults to max-content). */
    width: var(--tree-select-width, max-content);
  }
}