/* The plan page (business_hub/plan) and the subscription notice the app layout carries. */

@layer components {
  /* The state block is flat on the page: the plan's name with its state on the same line, one
     short line under it, and the one action the state asks for. */
  .plan-summary {
    padding: var(--section-label-gap) var(--content-padding) var(--content-padding);
  }

  .plan-summary-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .plan-summary-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
  }

  .plan-summary-state {
    font-weight: var(--font-weight-normal);
    white-space: nowrap;

    &.plan-summary-state--active {
      color: var(--color-success);
    }

    &.plan-summary-state--cancelled {
      color: var(--color-text-muted);
    }
  }

  /* The (i) at the row's end opens what the plan includes; the same square as every other
     header control, pulled back so its ink lines up with the row. */
  .plan-summary-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--back-tap-size);
    height: var(--back-tap-size);
    margin-block: calc((1.75rem - var(--back-tap-size)) / 2);
    margin-right: calc(-1 * var(--back-ink-inset));
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;

    svg {
      width: 22px;
      height: 22px;
    }
  }

  .plan-summary-line {
    margin: 0.375rem 0 0;
    color: var(--color-text-muted);
    line-height: var(--line-height-lg);
  }

  .plan-summary-action {
    margin-top: 1rem;
  }

  .plan-summary-note {
    margin: 0.75rem 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-lg);
  }

  /* The one filled button on the page, and the cancel button that shares its shape. */
  .plan-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* The payment row is a form (the portal and the checkout are POSTs), dressed as a list row. */
  .plan-method-form {
    display: contents;
  }

  .plan-method-row {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 0.5px solid var(--color-border);
    border-radius: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .plan-cancel-actions {
    padding: 1rem var(--content-padding) var(--content-padding);
  }

  .plan-cancel-confirm {
    margin-top: 0.75rem;
  }

  .plan-cancel,
  .plan-cancel-confirm {
    background: var(--color-danger-wash);
    border-color: var(--color-danger-wash);
    color: var(--color-danger-text);
  }

  .plan-price {
    padding: var(--section-label-gap) var(--content-padding) 0;
  }

  .plan-price-main {
    margin: 0 0 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .plan-price-amount {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
  }

  .plan-price-period {
    color: var(--color-text-muted);
  }

  .plan-price-line {
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
    line-height: var(--line-height-lg);
  }

  .plan-included {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;

    li {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      line-height: var(--line-height-lg);
    }

    svg {
      flex-shrink: 0;
      margin-top: 0.3em;
      color: var(--color-success);
    }
  }

  /* Inside the drawer the step content already pads; the price block does not add its own. */
  .plan-details-drawer .plan-price {
    padding: 0;
  }

  .subscription-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem var(--content-padding);
    background: var(--color-warning-wash);
    color: var(--color-warning-text);
    font-size: var(--text-sm);
    text-decoration: none;

    &.subscription-notice--locked,
    &.subscription-notice--past-due {
      background: var(--color-warning);
      color: var(--color-on-brand);
    }
  }

  .subscription-notice-action {
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }
}