/*
 * 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;
  counter-increment: step;
  position: relative;
}

.step {
  display: grid;
  grid-template-columns: var(--elvaio-steps-node) 1fr;
  gap: var(--elvaio-space-04);
  padding-bottom: var(--elvaio-space-06);
}

.node {
  width: var(--elvaio-steps-node);
  height: var(--elvaio-steps-node);
  border-radius: 50%;
  background: var(--elvaio-color-card);
  border: 4px solid var(--elvaio-color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--elvaio-font-mono);
  font-weight: var(--elvaio-font-weight-semibold);
  font-size: var(--elvaio-font-size-caption);
  color: var(--elvaio-color-text);
  position: relative;
  z-index: 1;
}

.node::before {
  content: counter(step);
}

:host([final]) .node {
  background: var(--elvaio-color-accent);
}

/* Mobile and tablet: a plain vertical rail with a connecting line. */
:host::before {
  content: '';
  position: absolute;
  left: calc(var(--elvaio-steps-node) / 2 - var(--elvaio-steps-wave-width) / 2);
  top: var(--elvaio-steps-node);
  bottom: 0;
  width: var(--elvaio-steps-wave-width);
  background: var(--elvaio-color-accent);
}

:host(:last-child)::before {
  display: none;
}

.when {
  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-accent-text);
}

.title {
  display: block;
  font-family: var(--elvaio-font-title);
  font-weight: var(--elvaio-font-weight-title);
  font-size: var(--elvaio-font-size-title-body);
}

.description {
  margin: 0;
  color: var(--elvaio-color-text-muted);
}

@media ((min-width: 62.5rem)) {
  :host {
    padding-right: var(--elvaio-space-06);
  }

  :host(:not(:first-child)) {
    padding-left: var(--elvaio-space-06);
  }

  :host(:nth-child(even)) {
    margin-top: var(--elvaio-steps-offset);
  }

  :host::before {
    display: none;
  }

  .step {
    display: flex;
    flex-direction: column;
    gap: var(--elvaio-space-05);
    grid-template-columns: unset;
    padding: 0;
  }

  /*
   * Each step draws half of the brand wave in its own ::after, so the line
   * is continuous through every node. Odd (high) steps draw the top edge
   * plus both flanks (an inverted U, rounded top corners); even (low)
   * steps draw the bottom edge plus both flanks (a U, rounded bottom
   * corners) and sit --elvaio-steps-offset lower. The flanks are centered
   * on the column boundary and meet halfway between the two levels: every
   * measurement below is derived from the node size and wave width tokens,
   * not a separate magic number, so the two always line up exactly.
   */
  :host::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: calc((var(--elvaio-steps-node) - var(--elvaio-steps-wave-width)) / 2);
    height: calc(var(--elvaio-steps-offset) / 2 + var(--elvaio-steps-wave-width) / 2);
    left: calc(var(--elvaio-steps-wave-width) / -2);
    right: calc(var(--elvaio-steps-wave-width) / -2);
    border: var(--elvaio-steps-wave-width) solid var(--elvaio-color-accent);
    border-bottom: 0;
    border-radius: var(--elvaio-steps-wave-radius) var(--elvaio-steps-wave-radius) 0 0;
    background: none;
  }

  :host(:nth-child(even))::after {
    top: calc(-1 * var(--elvaio-steps-node));
    border-top: 0;
    border-bottom: var(--elvaio-steps-wave-width) solid var(--elvaio-color-accent);
    border-radius: 0 0 var(--elvaio-steps-wave-radius) var(--elvaio-steps-wave-radius);
  }

  /* First step: no left flank, the wave starts at the node's own center. */
  :host(:first-child)::after {
    left: calc(var(--elvaio-steps-node) / 2);
    border-left: 0;
    border-top-left-radius: 0;
  }

  :host(:first-child:nth-child(even))::after {
    border-bottom-left-radius: 0;
  }

  /* Last step: no right flank, the wave ends flush with the column edge. */
  :host(:last-child)::after {
    right: 0;
    border-right: 0;
  }

  :host(:last-child:nth-child(odd))::after {
    border-top-right-radius: 0;
  }

  :host(:last-child:nth-child(even))::after {
    border-bottom-right-radius: 0;
  }
}