/*
 * The one <details> every page uses to show more in place — a pricing
 * question, a list of sources, a definition — owned here so they all open
 * the same way (index R17). Native <details>, so it opens by mouse, keyboard
 * and with JavaScript off; a chevron that turns when it is open; a 44px
 * summary on touch.
 *
 *   <details class="disclosure">
 *     <summary class="disclosure__summary">Sources <%= icon "chevron-thin-down", … %></summary>
 *     <div class="disclosure__body">…</div>
 *   </details>
 *
 * `--popover` lifts the body out of the flow into a card beside the summary,
 * which is what the definition popover is built on (shared/_definition_popover).
 */
@layer components {
  /* Several in a row — a list of questions — are ruled apart. */
  .disclosure + .disclosure {
    border-block-start: var(--rule-width) solid var(--color-rule);
  }

  .disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }

    & .icon {
      flex: none;
      transition: rotate var(--duration-fast);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }

    [open] > & .icon {
      rotate: 180deg;
    }
  }

  .disclosure__body {
    padding-block: var(--space-2xs) var(--space-sm);
    color: var(--color-ink-soft);
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
  }

  /* The body as a card beside its summary, over whatever follows. */
  .disclosure--popover {
    position: relative;
    display: inline-block;

    & > .disclosure__summary {
      display: inline-flex;
      justify-content: start;
      padding-block: 0;
      font-weight: var(--weight-regular);
    }

    & > .disclosure__body {
      position: absolute;
      inset-block-start: calc(100% + var(--space-2xs));
      inset-inline-start: 0;
      z-index: 30;
      inline-size: min(20rem, 80vw);
      padding: var(--space-sm) var(--space-md);
      box-shadow: var(--shadow-overlay);
    }
  }
}

/*
 * The definition popover (shared/_definition_popover): a metric's name as a
 * popover disclosure, its card holding the meaning, the formula set in the
 * data face, the unit, and the way to the full definition.
 */
@layer components {
  .definition {
    & .disclosure__body {
      display: grid;
      gap: var(--space-xs);
    }

    & p {
      margin: 0;
    }
  }

  .definition__meaning {
    color: var(--color-ink);
  }

  .definition__formula {
    font-family: var(--font-data);
    font-size: var(--text-ui-sm);
  }

  .definition__unit {
    color: var(--color-ink-subtle);
    font-size: var(--text-meta);
  }

  .definition__more {
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-semibold);
  }
}