/*
 * Design tokens shared by every component.
 *
 * Each component imports this itself. Component bundles are isolated on the
 * Webflow site (own React root, Shadow DOM), so there is no shared stylesheet
 * to rely on — importing here is what guarantees the tokens exist wherever the
 * component lands.
 */
:host,
:host {
  --batlab-color-fg: #101014;
  --batlab-color-bg: #ffffff;
  --batlab-color-muted: #6b6b76;
  --batlab-color-accent: #1a1aff;
  --batlab-color-border: #e3e3e6;

  --batlab-color-stripe: #f5f6f8;
  --batlab-color-rule: #e4e8ef;
  --batlab-color-ink: #101943;

  --batlab-space-sm: 0.5rem;
  --batlab-space-md: 1rem;
  --batlab-space-lg: 1.5rem;

  --batlab-radius: 0.5rem;

  /*
   * Body type is inherited, so the component adopts whatever the site sets.
   * UI chrome is specified as Inter in the design file — named here with a
   * fallback stack, since this library does not load fonts. The Webflow site
   * has to serve Inter for it to resolve; the stack keeps things sane if not.
   */
  --batlab-font: inherit;
  --batlab-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * The themeable colours are deliberately NOT declared here.
 *
 * A declaration on :host beats a value inherited into the host, so declaring
 * them would mean the component's own default always won and a site-set
 * property could never reach it. Their defaults live at each use site as the
 * second argument to var(), which leaves the cascade intact:
 *
 *   1. a prop on the component sets the property inline — highest priority
 *   2. the site sets it anywhere up the tree and it inherits in
 *   3. neither, and the var() fallback applies
 *
 * Brand values: #00ff98 accent, #033d8d on it (7.67:1), #101943 header.
 */

/* Text in the table is the brand ink, not a generic near-black. Tone, rating
   and winner rules override it per cell. */
.batlab-compare {
  font-family: var(--batlab-font);
  color: var(--batlab-color-ink);
}

/* The Collection Lists are data, not design. Hidden, but still in the DOM. */
.batlab-compare__source {
  display: none;
}

/*
 * The frame lives on the scroller, not the table: on the table it would scroll
 * out of view with the content, leaving the visible edge unbordered.
 */
.batlab-compare__scroll {
  overflow-x: auto;
  border: 1px solid var(--batlab-color-rule);
  border-radius: 2px;
}

/*
 * Fixed layout, so the declared column width is honoured. Under `auto` the
 * browser treats a width as a suggestion and grows any column whose content
 * asks for more — which is what pushed the pinned label column to 202px.
 * Bat columns then share the remaining space evenly.
 */
.batlab-compare__table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  /*
   * No min-width floor (removed 2026-08-18 at the site team's request): the
   * table always fits its container, dividing the space among bat columns.
   * In narrow containers, long bat names wrap across multiple lines instead
   * of the table overflowing into the scroller.
   */
}

.batlab-compare__corner,
.batlab-compare__head {
  position: relative;
  background: var(--batlab-color-header, #101943);
  color: var(--batlab-color-header-text, #fff);
  text-align: left;
  font-family: var(--batlab-font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0;
}

/*
 * Cells are sized frames, not padded boxes — which is how the design is built
 * (its labels read "169 Fill x 55 Fill"). Each cell declares its height and
 * horizontal inset; vertical position comes from centring, and the space that
 * looks like vertical padding is whatever is left over. `height` on a table
 * cell behaves as a minimum, so a two-line label still grows the row.
 */
.batlab-compare__corner,
.batlab-compare__head,
.batlab-compare__label,
.batlab-compare__cell {
  height: 55px;
  vertical-align: middle;
}

.batlab-compare__corner {
  padding: 0 14px;
}

.batlab-compare__head {
  padding: 0 12px;
}

/* The row-label column stays put while bat columns scroll. */
.batlab-compare__corner,
.batlab-compare__label {
  position: sticky;
  left: 0;
  z-index: 1;
}

/*
 * The label column is pinned at its design width rather than sized by content,
 * so the columns do not reflow as bat names change length.
 */
.batlab-compare__corner,
.batlab-compare__label {
  /* border-box, or the cell's padding is added to the declared width and the
     column lands 32px wide of the design. The host page's box-sizing is not
     ours to assume. */
  box-sizing: border-box;
  width: 169px;
  min-width: 169px;
}

/* Type per the design file. px, not rem — the values are pixel-precise and the
   host page's root size is not ours to assume. */
/* Padding matches the corner cell above it, so the label column reads as one
   aligned edge from the header down. */
.batlab-compare__label {
  background: var(--batlab-color-bg);
  text-align: left;
  padding: 0 14px;
  /* Labels carry their own line breaks — the marginal rows always break after
     the "%", rather than wherever the column width happens to run out. */
  white-space: pre-line;
  font-family: var(--batlab-font-ui);
  font-weight: 800;
  font-size: 10px;
  line-height: 15.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--batlab-color-rule);
}

/*
 * 20x20 exactly, per the design file — px rather than rem, because the Webflow
 * site's root font size is not ours to assume and the spec is pixel-precise.
 */
.batlab-compare__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--batlab-color-brand-green, #00ff98);
  color: var(--batlab-color-brand-navy, #033d8d);
}

.batlab-compare__remove svg {
  display: block;
}

.batlab-compare__cell {
  position: relative;
  padding: 0 12px;
  font-family: var(--batlab-font-ui);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 20.92px;
  letter-spacing: 0;
  text-align: center;
  border-bottom: 1px solid var(--batlab-color-rule);
}

/*
 * Vertical rules between columns, carried through the header so the column
 * structure reads as one grid rather than starting below the navy bar. None on
 * the outer edge.
 */
.batlab-compare__label,
.batlab-compare__cell:not(:last-child),
.batlab-compare__corner,
.batlab-compare__head:not(:last-child) {
  border-right: 1px solid var(--batlab-color-rule);
}

/*
 * The striped columns continue into the header, lifted rather than greyed —
 * the same alternation, tuned for a dark ground.
 *
 * `odd` here and `odd` on the body cells land on the same columns only because
 * both counts include the row-label cell at position 1. Changing that cell
 * would move the stripe in one row and not the other.
 */
.batlab-compare__head:nth-child(odd) {
  /* Derived from the header colour, so theming it moves both together. */
  background: color-mix(in srgb, var(--batlab-color-header, #101943) 93%, #fff);
}

/*
 * Alternating column shading. Counting includes the row-label header cell, so
 * odd `td` positions are the second, fourth… bat columns — the striping the
 * mockups show.
 *
 * This sits above the tone and winner rules deliberately: they all carry the
 * same specificity, so source order decides, and a coloured cell must win over
 * its column's stripe.
 */
.batlab-compare__cell:nth-child(odd) {
  background: var(--batlab-color-stripe);
}

.batlab-compare__cell[data-winner] {
  background: var(--batlab-color-brand-green, #00ff98);
  color: var(--batlab-color-brand-navy, #033d8d);
}

/*
 * Tone colours are measured against the #fff cell background: #0b7a4c is
 * 5.38:1 and #c2451f is 5.04:1, both clearing WCAG AA's 4.5:1 for the 1rem
 * bold text used here (too small to qualify as "large text").
 */
.batlab-compare__cell[data-tone="positive"] {
  color: #0b7a4c;
}

.batlab-compare__cell[data-tone="negative"] {
  color: #c2451f;
}

.batlab-compare__cell[data-format="rating"] {
  color: #0b7a4c;
}

.batlab-compare__cell[data-winner] {
  /* Winner fill wins over tone colouring. */
  color: var(--batlab-color-brand-navy, #033d8d);
}

/*
 * Clipped rather than `display: none`, which would drop it from the
 * accessibility tree and take the winner announcement with it.
 */
.batlab-compare__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.batlab-compare__empty {
  padding: var(--batlab-space-lg);
  border: 1px dashed var(--batlab-color-border);
  border-radius: var(--batlab-radius);
  color: var(--batlab-color-muted);
}

.batlab-compare__add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  /* Less padding on the icon side than the text side: a glyph sitting against
     the pill's curve needs less room than a word does to look evenly inset. */
  padding: 0.25rem 16px 0.25rem 10px;
  border: 0;
  border-radius: 999px;
  background: var(--batlab-color-brand-green, #00ff98);
  color: var(--batlab-color-brand-navy, #033d8d);
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
}

.batlab-compare__add svg {
  display: block;
  flex: none;
}

/*
 * The label is #101943 while the plus glyph is #033d8d — two different navies,
 * per the design file, so the label carries its own colour rather than
 * inheriting the button's.
 */
.batlab-compare__add-label {
  color: var(--batlab-color-ink);
  font-family: var(--batlab-font-ui);
  font-weight: 700;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0;
}

/*
 * Both header controls take a green ring rather than the browser's blue one:
 * the default outline reads as a stray form control on the navy bar, and the
 * offset leaves a band of navy between pill and ring so the green stays legible
 * against the green fill. The trigger keeps the ring while its panel is open,
 * so it stays visibly tied to the menu after focus moves into the search field.
 */
.batlab-compare__add:focus-visible,
.batlab-compare__add[data-open],
.batlab-compare__remove:focus-visible {
  outline: 2px solid var(--batlab-color-brand-green, #00ff98);
  outline-offset: 2px;
}

.batlab-compare__search {
  padding: 0.375rem;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.batlab-compare__search input {
  /* The host page's box-sizing is not ours to assume — without this the
     padding and border push the field past the panel it sits in. */
  box-sizing: border-box;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 0.375rem;
  background: rgb(255 255 255 / 6%);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
}

.batlab-compare__search input::placeholder {
  color: rgb(255 255 255 / 45%);
}

.batlab-compare__search input:focus-visible {
  outline: 2px solid var(--batlab-color-brand-green, #00ff98);
  outline-offset: 1px;
  border-color: transparent;
}

/*
 * Rendered into <body> via a portal, not beside the input: the table's
 * horizontal scroller sets overflow-x, which forces overflow-y to auto and
 * clips any absolutely-positioned child. Position comes from the input's
 * measured rect, so this is fixed rather than absolute.
 *
 * Being outside the component also means it inherits nothing from it — the
 * type scale below is set explicitly rather than assumed, or the menu renders
 * at the host page's base size.
 */
.batlab-compare__popup {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  max-width: 92vw;
  margin-top: 0.375rem;
  overflow: hidden;
  background: #0d1733;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.625rem;
  box-shadow: 0 1rem 2rem rgb(3 8 24 / 45%);
  font-family: var(--batlab-font);
}

.batlab-compare__popup ul {
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
}

.batlab-compare__option {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  overflow-wrap: anywhere;
}

/*
 * The active row is marked twice — tinted fill and a green edge — so keyboard
 * position is legible without relying on colour alone.
 */
.batlab-compare__option:hover,
.batlab-compare__option[aria-selected="true"] {
  background: rgb(0 255 152 / 14%);
  color: var(--batlab-color-brand-green, #00ff98);
}

.batlab-compare__option[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 3px;
  border-radius: 3px;
  background: var(--batlab-color-brand-green, #00ff98);
}

/* Only ever rendered inside the portalled popup, so it carries the panel's
   surface treatment itself rather than splitting across two rules. */
.batlab-compare__nomatch {
  margin: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 62%);
}

/*
 * The flex row lives INSIDE the cell, not on it: `display: flex` on a <th>
 * takes it out of table layout entirely and the header stops aligning with its
 * column. Label or bat name on the left, control on the right, vertically
 * centred so a two-line bat name still lines up with its ✕.
 */
.batlab-compare__head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--batlab-space-sm);
  min-height: 1.75rem;
}
/*
 * Bat names shrink inside their header cell rather than pushing the ✕ out, and
 * are capped so they wrap at the design's break points rather than at whatever
 * width the column happens to be.
 *
 * The cap is measured, not chosen — but it cannot reproduce the mockup exactly,
 * because the mockup's own break points contradict each other at this size:
 * COMBAT's second line ("Performance Racer 2026") needs 133px, while
 * Louisville breaking after "Slugger" needs under 130px. The design was laid
 * out at one fixed canvas and those breaks are an artifact of it.
 *
 * So the cap targets what the mockup communicates rather than its exact words:
 * every bat name on two lines. 138px does that for all thirteen, with a few px
 * of slack. Whatever the column has spare becomes the gap before the ✕, so the
 * wrap holds at any viewport instead of moving with it.
 */
.batlab-compare__head-inner > span {
  min-width: 0;
  max-width: 138px;
}
/* "Bat Name" is never truncated and never wraps; label, gap and pill fit the
   169px column's 141px content box. */
.batlab-compare__corner .batlab-compare__head-inner {
  gap: 8px;
}

.batlab-compare__corner .batlab-compare__head-inner > span {
  flex: none;
  white-space: nowrap;
}