/*
 * The Powerpack panel: the signed-out sidebar and drawer (`shared/_callout`
 * and `shared/_powerpack_features`). The nearest thing the site has to a
 * pricing page, so it is set like one — an accent head with the name as an
 * eyebrow and the price set as a price, a checklist on hairline rules, and
 * the button anchored at the bottom.
 *
 * The Login / Create Account row stays where it has always been, above the
 * panel, and is quiet: the subscribe button is the one primary action here.
 */
@layer components {
  .powerpack {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--rule-width) solid var(--color-accent-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .powerpack__auth {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-ink-subtle);
    font-size: var(--text-ui);

    & > a {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--target-min);
      padding-inline: var(--space-sm);
    }
  }

  .powerpack__head {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-block-end: var(--rule-width) solid var(--color-accent-line);
    background-color: var(--color-accent-tint);
  }

  .powerpack__mark {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: var(--rule-width) solid var(--color-accent-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .powerpack__name {
    margin: 0;
    color: var(--color-accent-strong);
    font-family: var(--font-ui);
    font-size: var(--text-meta-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    line-height: var(--leading-meta-xs);
    text-transform: uppercase;
  }

  .powerpack__pitch {
    color: var(--color-ink-soft);
    font-size: var(--text-ui);
    line-height: 1.5;
  }

  /* The price sits inside the pitch's sentence, so it is set larger in the
     line rather than broken out of it. */
  .powerpack__price {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-stat);
    font-weight: var(--weight-semibold);
    line-height: 1;
    font-variant-numeric: lining-nums;
  }

  .powerpack__features {
    padding: var(--space-2xs) var(--space-lg);
  }

  /* The same checklist outside the panel (the signup page's pitch), where the
     box around it already provides the inset. */
  .powerpack__features--flush {
    padding-inline: 0;
  }

  .powerpack__feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xs) var(--space-xs);
    padding-block: var(--space-sm);

    & + & {
      border-block-start: var(--rule-width) solid var(--color-surface-sunken);
    }

    & .heading {
      margin-block-end: var(--space-3xs);
    }
  }

  .powerpack__feature-text {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
    line-height: 1.5;
  }

  .powerpack__action {
    margin-block-start: auto;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }
}