/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


:host {
  display: block;
}

.scroll {
  overflow-x: auto;
  border-radius: var(--elvaio-radius-card);
  /* Pure-CSS scroll-shadow hint: the edge gradients scroll with the
     content (`local`) and disappear once there's nothing left to reveal,
     while the side shadows stay fixed (`scroll`) so they only show while
     more content exists off-screen in that direction. */
  background:
    linear-gradient(to right, var(--elvaio-color-card) 30%, transparent) left,
    linear-gradient(to left, var(--elvaio-color-card) 30%, transparent) right,
    linear-gradient(to right, var(--elvaio-color-border-decorative), transparent) left,
    linear-gradient(to left, var(--elvaio-color-border-decorative), transparent) right;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.5rem 100%, 0.5rem 100%;
  background-attachment: local, local, scroll, scroll;
}

.comparison-table {
  min-width: 42rem;
  background: var(--elvaio-color-card);
  border: 2px solid var(--elvaio-color-text);
  border-radius: var(--elvaio-radius-card);
}

/* Each `role="row"` (the head row here, every slotted data row too) is its
   own grid with the same track count, rather than one shared grid for the
   whole table: a `<slot>` can't participate as a grid/subgrid item the way
   a real `<tbody>`'s rows do, so there's no single ancestor grid to line
   cells up in otherwise. `--columns` (row-label + each data column) is set
   once on the host in `comparison-table.ts` and inherited down to every
   row (including the slotted ones, via ordinary custom-property
   inheritance through the flat tree) so both sides always agree on the
   track count. */
.row,
::slotted(.comparison-row) {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) repeat(calc(var(--columns, 1) - 1), minmax(0, 1fr));
  border-bottom: 1px solid var(--elvaio-color-border-decorative);
}

/* `::slotted()` only ever matches the slotted node itself, never a
   descendant of it - the cells inside each `.comparison-row` aren't
   reachable from here, so their shared padding/alignment lives in
   `compositions.css`'s own `.comparison-row > *` rule instead (plain,
   unscoped light-DOM CSS, which *can* reach them). This rule only covers
   the head row's own cells, which render directly in this shadow tree. */
.row > * {
  padding: var(--elvaio-space-04);
  display: flex;
  align-items: center;
}

.row > *:not(:first-child) {
  justify-content: center;
  text-align: center;
}

.row.head {
  border-bottom-width: 2px;
  border-bottom-color: var(--elvaio-color-text);
}

.row.head > * {
  font-family: var(--elvaio-font-mono);
  font-size: var(--elvaio-font-size-label);
  font-weight: var(--elvaio-font-weight-medium);
  letter-spacing: var(--elvaio-letter-spacing-label);
  text-transform: uppercase;
}

::slotted(.comparison-row:last-child) {
  border-bottom: 0;
}

/* Covers the head row's own featured cell (rendered directly in this
   shadow tree). The matching tint on a slotted body row's featured cell
   is a `compositions.css` concern instead - same reason as the padding
   rule above, `::slotted()` can't reach a slotted node's descendants. */
.is-featured {
  background: var(--elvaio-color-accent-soft);
}