/*
 * 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;
}

.link-row {
  display: grid;
  grid-template-columns: 1fr var(--elvaio-steps-node);
  gap: var(--elvaio-space-02) var(--elvaio-space-04);
  align-items: center;
  padding: var(--elvaio-space-05) var(--elvaio-space-01);
  border-bottom: 1px solid var(--elvaio-color-border-control);
  color: var(--elvaio-color-text);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

:host(:first-child) .link-row {
  border-top: 2px solid var(--elvaio-color-text);
}

.link-row:hover {
  background: var(--elvaio-color-card);
}

.title {
  grid-column: 1;
  font-family: var(--elvaio-font-title);
  font-weight: var(--elvaio-font-weight-title);
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.context {
  grid-column: 1;
  order: -1;
  font-family: var(--elvaio-font-mono);
  font-size: var(--elvaio-font-size-label);
  letter-spacing: var(--elvaio-letter-spacing-label);
  text-transform: uppercase;
  color: var(--elvaio-color-text-muted);
}

.go {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: var(--elvaio-steps-node);
  height: var(--elvaio-steps-node);
  border-radius: 50%;
  background: var(--elvaio-color-button-primary-bg);
  color: var(--elvaio-color-button-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.link-row:hover .go {
  transform: translateX(var(--elvaio-space-01));
}

@media ((min-width: 48rem)) {
  .link-row {
    grid-template-columns: minmax(0, 1fr) 15rem var(--elvaio-steps-node);
    gap: var(--elvaio-space-06);
    padding: var(--elvaio-space-06) var(--elvaio-space-04);
  }

  .context {
    order: 0;
    grid-column: 2;
  }

  .title {
    grid-column: 1;
  }

  .go {
    grid-column: 3;
    grid-row: auto;
  }
}