/* Button component =========================================================
   Figma: Buttons group · Material 3 based, two colour variants.

   The visible pill is H 40 everywhere, corner radius 100, inner padding
   16/16, gap 8, icon 20×20, label Title (14) = Inter SemiBold 14/20.
   The design wraps the component in a 48px-tall frame — that is the touch
   target, invisible; here it is added with ::before.

   Colour variants (Figma calls both "Outlined Dark" and the article instance
   overrides the colour, so we name them by surface instead):
     --filled            light fill, dark label     → navigation
     --outlined          dark border and label      → bio
     --outlined-inverse  light border and label     → article

   Hover is handled by motion.js buttonFill() for all three (see
   js/animations.js) — none of them has a CSS hover, as the two would clash.
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--btn-height);
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--title-14-size);
  line-height: var(--title-14-leading);
  letter-spacing: var(--title-14-tracking);
  font-weight: var(--title-14-weight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 400ms ease, color 400ms ease;
}

/* Touch target: 4px taller than the visible pill on each side (40 → 48) */
.btn::before {
  content: "";
  position: absolute;
  inset: -0.25rem 0;
}

.btn__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* buttonFill() wraps the arrow in an extra span (overflow: hidden, for the
   roll animation). That span becomes a flex item inside the button and may
   shrink by default — in tight space it would collapse to zero and the icon
   would vanish behind the clip. Measured on a squeezed button. */
.btn > span:has([data-arrow]) {
  flex-shrink: 0;
}

/* --- Variants ------------------------------------------------------------
   The border comes from an inset box-shadow rather than a border: the box
   size stays put, and it matches the "Inside" stroke position in the design. */

/* The filled variant has no border, and the light pill is NOT the button's
   background but a separate layer.

   Why: buttonFill() grows a dark circle inside the button, shaped into a pill
   by the button's overflow: hidden + border-radius clip. The button's own
   background is not part of that clip but of the box — and the two edges are
   antialiased slightly differently, so a light hairline showed through from
   under the dark fill at the rounded ends. Clearly visible on an enlarged
   button.

   This way the light pill is among the clipped layers too, with the same
   geometry as the filling circle — which covers it completely. */
.btn--filled {
  background: transparent;
  color: var(--grey-12);
  isolation: isolate;   /* keeps the negative z-index layer inside the button */
}

.btn--filled::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;          /* buttonFill's circle sits at -1, so it paints above this */
  border-radius: inherit;
  background: var(--grey-98);
  pointer-events: none;
}

/* On hover the button takes on the secondary button's default appearance:
   dark surface, light 1px border, light label. At rest the border is as light
   as the pill, so it is invisible.

   Why outline and not inset box-shadow: a box-shadow is painted with the
   box's background, whereas buttonFill's circle is a negative z-index child
   that paints ABOVE it — only fragments of the border flashed out at the
   clip edge around the rounded ends. An outline paints above the content and
   is not clipped by the button's own overflow: hidden, so it stays even.

   The :not(:focus-visible) is there so the accent focus ring from base.css
   takes over for keyboard focus. */
.btn--filled:not(:focus-visible) {
  outline: 1px solid var(--grey-98);
  outline-offset: -1px;
}


.btn--outlined {
  background: transparent;
  color: var(--grey-12);
  box-shadow: inset 0 0 0 1px var(--grey-12);
}


.btn--outlined-inverse {
  background: transparent;
  color: var(--grey-98);
  box-shadow: inset 0 0 0 1px var(--grey-98);
}

/* The inverse variant's hover also comes from motion.js buttonFill() (light
   fill, dark label) — hence no CSS hover of its own. */