/*
 * pravar.design design system: components.
 * Requires tokens.css. Geometry is measured from the source SVGs in
 * /system/reference/ (assets/buttons/Button.svg and Button-1.svg).
 */

/* ── Icon ────────────────────────────────────────────────────
   Every icon is drawn on a 24px grid with a 2px stroke in currentColor,
   so it takes the colour of its parent text. Usage:
   <svg class="icon"><use href="/system/icons.svg#arrow-right"/></svg> */

.icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.icon--20 {
  width: 20px;
  height: 20px;
}

/* ── Button ──────────────────────────────────────────────────
   A 50px pill. Anatomy, left to right, every slot optional except the label:
     [icon] label [icon] | [icon]
   Icons render at 20px, which scales the 2px stroke to the 1.67px in the
   source. The divider is a hairline at 20% of the content colour, and it
   sits between two 12px gaps exactly as the source line does. */

.btn {
  --btn-bg: var(--green-light);
  --btn-fg: var(--black-100);
  --btn-border: transparent;
  --btn-divider: var(--black-20);
  --btn-tint: var(--black-10);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 25px;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-border);
  color: var(--btn-fg);
  font: var(--t-b3a); /* mobile: B3a, 14px — restored to B2a at 1024px */
  letter-spacing: var(--ls-none);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The source SVGs were measured at desktop, where the label is B2a (16px).
   Below 1024px it drops one step to B3a (14px) so the label doesn't crowd
   the pill on narrow screens; desktop is untouched. */
@media (min-width: 1024px) {
  .btn { font: var(--t-b2a); }
}

/* Not in the source. A subtle press-of-a-real-button feel: on hover the
   pill overshoots to 105% then eases back to 100% (the cubic-bezier's own
   spring, not a second keyframe), and a hairline-thin tint — Black 10 on
   the green fill, White 10 on the black fill — washes over the whole pill
   so hover reads even on a fill/bg that can't just darken like a link can.
   The tint is its own layer (not background-color) so it still shows on
   .btn--split, where children own the background. */
.btn:hover { transform: scale(1.05); }
.btn:active { transform: scale(0.97); transition-duration: 0.15s; }

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--btn-tint);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }

.btn .icon {
  width: 20px;
  height: 20px;
}

.btn__divider {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 -0.5px; /* a zero-width line in the source: the gaps meet at its centre */
  background: var(--btn-divider);
}

.btn--secondary {
  --btn-bg: var(--black-100);
  --btn-fg: var(--white-100);
  --btn-border: var(--white-20);
  --btn-divider: var(--white-20);
  --btn-tint: var(--white-10);
}

/* Icon-only: the same pill closed into a 50px circle around one icon
   (Behance, LinkedIn, sound). Measured from bible/stations_refs. */
.btn--icon {
  width: 50px;
  padding: 0;
  justify-content: center;
}

/* Split: two actions in one pill, e.g. [mail] Email | [copy]. Each part is
   its own link or button, so the padding moves onto the parts to keep the
   whole pill clickable. The geometry is the same as the plain button. */
.btn--split {
  gap: 0;
  padding: 0;
}

.btn__part {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
}

.btn__part:first-child { padding-left: 16px; }
.btn__part:last-child { padding-right: 16px; }

/* A split pill still springs as one piece on hover (.btn's own :hover
   above fires from either part by bubbling), but the tint has to pick out
   just the part under the cursor — Email vs. the copy button are different
   actions — so the shared .btn::after is switched off here and each part
   gets its own, clipped to the pill's rounded ends by .btn--split's own
   overflow: hidden. */
.btn--split { overflow: hidden; }
.btn--split::after { content: none; }

.btn__part {
  position: relative;
}
.btn__part::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-tint);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.btn__part:hover::after { opacity: 1; }

/* Not in the source. A placeholder so the button is usable by keyboard
   until real hover / pressed / focus states are designed. */
.btn:focus-visible {
  outline: 2px solid var(--white-100);
  outline-offset: 3px;
}

/* ── Stat grid ───────────────────────────────────────────────
   A black card of equal cells split by hairlines: one semibold title line
   (B2a, accents in Green Light) over a White 80 body (B2). Measured from
   bible/stations_refs: 32px radius, 20px cell padding, 3px title-to-body gap.

   Lines are White 20. Figma styles them White 10, but every cell is its own
   stroked rect, so each shared edge carries two stacked White 10 strokes and
   renders at ~19% (sampled: 49/255; White 20 is 51). White 20 matches what
   the design actually shows.

   The lines take no layout width, so every cell is exactly the width Figma
   drew (200 / 215 / 180 / 221.5): cell dividers are outset shadows (the last
   column's and row's are clipped away), the outer edge an overlay. */

.stat-grid {
  --stat-grid-line: var(--white-20);
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 32px;
  background: var(--black-100);
}

.stat-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--stat-grid-line);
  border-radius: inherit;
  pointer-events: none;
}

/* 20px padding at every breakpoint — measured off both Station 1am and
   Station 1ad (mobile and desktop reference exports), not just the desktop
   one: mobile's own left/top ink insets land at the same ~20px, not the
   smaller gap the pre-refactor code used for this card. */
.stat-grid__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px;
  box-shadow: 1px 0 0 var(--stat-grid-line), 0 1px 0 var(--stat-grid-line);
}

/* Below 1024px the cells are narrower than the desktop 200-215px Figma
   spec (a 2-column mobile grid, or the sm: 640px tier's own width), so the
   title/body drop one type-scale step (B3a/B3, 14px) to keep every cell's
   longest string — "Product Design Lead", "Website rebuilt end to end, no
   dev dependency" — inside two real lines rather than wrapping past them.
   Desktop restores the spec's own B2a/B2 (16px) exactly. */
.stat-grid__title {
  font: var(--t-b3a);
  color: var(--white-100);
  /* "Product Design Lead" is the one string on the smallest real phones
     (375px) that still overflows its ~127px cell by a few px at 0 tracking
     once padding is a true 20px — undone at 1024px like the other
     line-count exceptions in src/styles/station-ui.css. */
  letter-spacing: -0.4px;
}

.stat-grid__body {
  font: var(--t-b3);
  color: var(--white-80);
}

@media (min-width: 1024px) {
  .stat-grid__title { font: var(--t-b2a); letter-spacing: var(--ls-none); }
  .stat-grid__body { font: var(--t-b2); }
}

.stat-grid__accent {
  color: var(--green-light);
}