/*
 * THE ⓘ EXPLAINER. Two boxes, neither of them the component's own: the trigger
 * is an `IconButton` and the panel a `PopoverContent`, so this sheet declares
 * only what those two cannot know — the panel's reading width.
 *
 * It sets the panel's own `--lotics-popover-width` rather than a `width`, and
 * that is not a style choice. `.lotics-popover__popup` already declares `width`
 * at one class of specificity, both rules live in `lotics.components`, and which
 * of two equal rules wins is decided by which stylesheet the bundler emitted
 * first — here `info_popover.css`, because it is this module's own first import
 * and `popover.css` arrives with the import below it. So a `width` here loses,
 * on a rule nothing in the layer order fixes. The variable is the panel's
 * published knob, it collides with nothing, and a consumer beats it with one
 * selector — which an inline `width` prop would not let them do.
 *
 * 280px is a literal because it is a SIZE this component owns (§5 rule 2): a
 * sentence or two has no rung on the spacing scale, and the number is the one
 * `docs/catalog.md` states. It is the READING COLUMN — the panel adds its own
 * inset on each side, which is the geometry the explainer has always had.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-info-popover__popup {
    --lotics-popover-width: calc(280px + 2 * var(--lotics-popover-inset));
  }
}