/* ============================================================
   Grove UI — Components
   Extracted from a link-in-bio profile page
   Source selector recorded per component.
   ============================================================ */

/* ── Profile page wrapper ─────────────────────────────────── */
/* Source: html element */
.grove-profile {
  min-height: 100vh;
  background-color: var(--colour-bg-page);
  font-family: var(--font-body);
  color: var(--colour-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-4) var(--space-16);
  box-sizing: border-box;
}

/* ── Profile header ──────────────────────────────────────── */
/* Source: profile header section with animated background */
.grove-hero {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-4xl) var(--radius-4xl) 0 0;
  overflow: hidden;
  aspect-ratio: 1 / 0.7;
  background: linear-gradient(
    135deg,
    #F4A5B0 0%,
    #E37282 30%,
    #D05A6A 60%,
    #C04058 100%
  );
}
.grove-hero__bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 2px,
    transparent 2px,
    transparent 16px
  );
}

/* Profile nav bar */
.grove-profile-nav {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grove-profile-nav__logo {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.20);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
.grove-profile-nav__actions {
  display: flex;
  gap: var(--space-2);
}

/* Subscribe button — source: button.kit-subscribe */
.grove-btn-subscribe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.90);
  color: #1A1A1A;
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: var(--transition-card);
  white-space: nowrap;
}
.grove-btn-subscribe:hover {
  background: rgba(255,255,255,1);
  transform: scale(1.02);
}
.grove-btn-subscribe:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* Icon button (share etc.) */
.grove-btn-icon {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.20);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  transition: var(--transition-card);
}
.grove-btn-icon:hover {
  background: rgba(255,255,255,0.30);
}
.grove-btn-icon:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* Profile identity block */
.grove-profile-identity {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-4);
  right: var(--space-4);
}
.grove-profile-name {
  font-family: var(--font-display);
  font-size: var(--size-display);
  line-height: var(--lh-display);
  font-weight: var(--weight-normal);
  color: #FFFFFF;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  animation: entranceRise var(--duration-slower) var(--ease-out) both;
}
.grove-profile-bio {
  font-size: var(--size-base);
  font-weight: var(--weight-medium);
  line-height: var(--lh-base);
  color: rgba(255,255,255,0.90);
  margin: var(--space-1) 0 0;
  animation: entranceRise var(--duration-slower) var(--ease-out) 100ms both;
}

/* ── Avatar ──────────────────────────────────────────────── */
/* Source: img.avatar — 142×142px, border-radius 5px — measured */
.grove-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-sm);  /* 5px measured → nearest token 6px */
  object-fit: cover;
  display: block;
  animation: avatarRise var(--duration-slow) var(--ease-spring) both;
}
.grove-avatar--circle {
  border-radius: var(--radius-pill);
}
.grove-avatar--ring {
  box-shadow: var(--shadow-avatar-ring, 0 0 0 2px rgba(255,255,255,0.3));
}

/* ── Social icon row ─────────────────────────────────────── */
/*
  Source: data-sticker-anchor="socials" row below profile header — measured.
  Row:    flex flex-wrap, centered, 48px tall.
  Button: 48×48px, padding 8px (p-2), transparent bg, NO border, overflow
          hidden, hover scale 107.5%. The icons are bare — no pill/chip behind.
  Icon:   32×32px SVG, tinted with the profile title colour (#0D0F0C on the
          light profile → mapped to --colour-text-primary here).
*/
.grove-social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.grove-social-icon {
  width: 48px;
  height: 48px;
  padding: var(--space-2);       /* 8px → 32px icon inside 48px button */
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colour-text-primary);
  text-decoration: none;
  font-size: 28px;               /* emoji fallback glyph size */
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.grove-social-icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
  pointer-events: none;
}
.grove-social-icon:hover {
  transform: scale(1.075);       /* hover:scale-[107.5%] — measured */
}
.grove-social-icon:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* ── Glass link card (core component) ───────────────────── */
/*
  Source: .LinkContainer_LinkContainer > .ButtonStyleGlass
  Width:  362px (362/390 viewport — 14px margin each side)
  Radius: 32px — measured (outer, standard/stack cards). Featured & carousel
          cards use 28px — see .grove-link-card--featured below.
  BG:     rgba(255,255,255,0.10) + top→bottom white gradient — measured
  Shadow: rgba(0,0,0,0.02) 0px 0px 8px — measured
  ::before = 1px gradient border (top/bottom white highlight), radius inherits
  ::after  = SVG feTurbulence noise texture (baseFrequency 0.9, 4 octaves) at opacity 0.15
  Transition: transform 75ms, box-shadow 75ms, background-color 75ms — measured
*/
.grove-link-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  max-width: 480px;
  min-height: var(--card-height);
  padding: 12px var(--space-8);
  border-radius: var(--radius-4xl);  /* 32px — measured (standard/stack) */
  background-color: var(--colour-glass-bg);
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: var(--colour-text-primary);
  font-family: var(--font-body);
  letter-spacing: -0.2px;
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--transition-card);
  overflow: hidden;
  isolation: isolate;
}
/* 1px gradient border — white highlight top & bottom */
.grove-link-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    rgba(255, 255, 255, 0.30),
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.30)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* SVG feTurbulence noise texture */
.grove-link-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.grove-link-card > * {
  position: relative;
  z-index: 2;
}
.grove-link-card:hover {
  background-color: var(--colour-glass-bg-hover);
  box-shadow: var(--shadow-md);
  transform: scale(1.01);
}
.grove-link-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-xs);
}
.grove-link-card:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}
/* Text "chin" — title + subtitle, gap 1px, centered */
.grove-link-card__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.grove-link-card__title {
  font-size: var(--size-sm);          /* 14px → 16px at sm: */
  font-weight: var(--weight-medium);  /* 500 — measured */
  line-height: 1.2;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) {
  .grove-link-card__title { font-size: var(--size-base); }
}
/* Subtitle row — platform icon · meta, 12px @ 0.6 opacity */
.grove-link-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--size-xs);
  font-weight: var(--weight-normal);
  color: var(--colour-text-primary);
  opacity: 0.6;
}
.grove-link-card__meta-icon {
  width: 18px;
  height: 18px;
  margin-left: -4px;  /* -ml-1 */
  flex-shrink: 0;
}
.grove-link-card__arrow {
  font-size: 16px;
  opacity: 0.6;
  flex-shrink: 0;
  margin-left: var(--space-3);
}

/* Animation variants */
.grove-link-card--wobble:active {
  animation: wobble 350ms var(--ease-in-out);
}
.grove-link-card--pop:active {
  animation: pop 300ms var(--ease-spring);
}
.grove-link-card--buzz:active {
  animation: buzz 300ms var(--ease-in-out);
}

/* ── Media link card ─────────────────────────────────────── */
/*
  Source: .LinkContainer with thumbnail image
  Height: 127px — measured
  Radius: 28px — measured
*/
.grove-link-card--media {
  grid-template-columns: 1fr auto;
  min-height: var(--card-height-lg);
  border-radius: var(--radius-3xl);
  padding: var(--space-4);
  gap: var(--space-4);
}
.grove-link-card--media .grove-link-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.grove-link-card__thumbnail {
  width: 100px;
  height: 94px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Pill action button ───────────────────────────────────── */
/*
  Source: .donate-btn — pill shaped action/CTA
  Height: 48px — measured
  Radius: 9999px — measured
  BG: rgba(0,0,0,0.14) — measured
  Hover: rgba(0,0,0,0.22) — measured
*/
.grove-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 480px;
  height: var(--pill-height);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--colour-action-bg);
  color: var(--colour-action-text);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: var(--transition-card);
}
.grove-btn-pill:hover {
  background: var(--colour-action-bg-hover);
  transform: scale(1.01);
}
.grove-btn-pill:active {
  transform: scale(0.97);
}
.grove-btn-pill:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}
.grove-btn-pill--sm {
  height: 26px;            /* px-3 py-1 text-xs — measured */
  padding: 0 var(--space-3);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  width: auto;
}

/* ── Stats grid ───────────────────────────────────────────── */
/*
  Source: stats block — `grid grid-cols-2 gap-[2px]`
  Each cell: radius 20px, bg rgba(0,0,0,0.05), padding 14px, items flex-start
  Icon 32×32 (tabler mask) opacity 0.7, margin-bottom 24px
  Value: 36px / weight 800 Inter, line-height 1.05, letter-spacing -0.9px, tabular-nums
  Label: 12px, opacity 0.7, margin-top 8px
*/
.grove-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 100%;
  max-width: 480px;
}
.grove-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--button-inner-padding);  /* 14px */
  border-radius: var(--radius-xl);        /* 20px */
  background: rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}
.grove-stat__icon {
  width: 32px;
  height: 32px;
  opacity: 0.7;
  margin-bottom: var(--space-6);  /* 24px */
  flex-shrink: 0;
}
.grove-stat__value {
  font-family: var(--font-body);          /* Inter — not Anton */
  font-size: 36px;
  font-weight: var(--weight-extrabold);   /* 800 */
  line-height: 1.05;
  letter-spacing: -0.9px;                 /* tracking-tight at this size */
  color: var(--colour-text-primary);
  font-variant-numeric: tabular-nums;
}
.grove-stat__label {
  font-size: var(--size-xs);
  font-weight: var(--weight-normal);
  color: var(--colour-text-primary);
  opacity: 0.7;
  margin-top: var(--space-2);  /* 8px */
}

/* ── Badge ───────────────────────────────────────────────── */
/* Source: "NEW" sticker badge */
.grove-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--colour-brand-accent);
  color: var(--colour-text-on-accent);
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.grove-badge--pill {
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
}
.grove-badge--outline {
  background: transparent;
  border: 1.5px solid var(--colour-brand-accent);
  color: var(--colour-brand-accent);
}
.grove-badge--star {
  /* The "NEW" sticker with star/burst shape — replicated with clip */
  background: #C8F44E;  /* yellow-green sticker — observed in source */
  color: #1A1A1A;
  border-radius: var(--radius-xs);
  transform: rotate(-8deg);
  font-weight: var(--weight-bold);
}

/* ── Platform navigation (creator admin bar) ─────────────── */
/* Source: top bar of the platform/creator view */
.grove-nav {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--colour-bg-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}
.grove-nav__wordmark {
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: var(--weight-bold);
  color: var(--colour-text-primary);
  text-decoration: none;
}
.grove-nav__links {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.grove-nav__link {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast), background var(--duration-fast);
}
.grove-nav__link:hover {
  color: var(--colour-text-primary);
  background: var(--colour-bg-subtle);
}
.grove-nav__link.is-active {
  color: var(--colour-text-primary);
  font-weight: var(--weight-semibold);
}
.grove-nav__link:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* ── Platform footer ─────────────────────────────────────── */
/* Source: "Powered by..." footer — warm off-white background */
.grove-footer {
  width: 100%;
  max-width: 480px;
  margin-top: auto;
  padding: var(--space-8) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.grove-footer__attribution {
  font-size: var(--size-xs);
  color: var(--colour-text-muted);
  text-align: center;
}
.grove-footer__links {
  display: flex;
  gap: var(--space-4);
}
.grove-footer__link {
  font-size: var(--size-xs);
  color: var(--colour-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.grove-footer__link:hover {
  color: var(--colour-text-secondary);
}

/* ── Input (text field — from contact form) ──────────────── */
/* Source: contact form modal inputs */
.grove-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--colour-border);
  background: var(--colour-bg-surface);
  color: var(--colour-text-primary);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: var(--weight-normal);
  box-sizing: border-box;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  outline: none;
}
.grove-input::placeholder {
  color: var(--colour-text-muted);
}
.grove-input:hover {
  border-color: var(--colour-border-strong);
}
.grove-input:focus {
  border-color: var(--colour-brand-accent);
  box-shadow: 0 0 0 3px rgba(227, 114, 130, 0.20);
}
.grove-input--error {
  border-color: var(--colour-error);
}
.grove-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
}

/* ── Select ──────────────────────────────────────────────── */
.grove-select {
  appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-10) 0 var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--colour-border);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right var(--space-4) center,
    var(--colour-bg-surface);
  color: var(--colour-text-primary);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--duration-fast);
}
.grove-select:focus {
  border-color: var(--colour-brand-accent);
  box-shadow: 0 0 0 3px rgba(227, 114, 130, 0.20);
}

/* ── Toggle ──────────────────────────────────────────────── */
.grove-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.grove-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.grove-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--colour-border);
  transition: background var(--duration-fast);
  cursor: pointer;
}
.grove-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.grove-toggle input:checked + .grove-toggle__track {
  background: var(--colour-brand-accent);
}
.grove-toggle input:checked + .grove-toggle__track::after {
  transform: translateX(20px);
}
.grove-toggle input:focus-visible + .grove-toggle__track {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* ── Checkbox ────────────────────────────────────────────── */
.grove-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--size-sm);
  color: var(--colour-text-primary);
}
.grove-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.grove-checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--colour-border-strong);
  background: var(--colour-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.grove-checkbox input:checked + .grove-checkbox__box {
  background: var(--colour-brand-accent);
  border-color: var(--colour-brand-accent);
  color: #fff;
}
.grove-checkbox input:focus-visible + .grove-checkbox__box {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* ── Modal ───────────────────────────────────────────────── */
/* Source: subscribe / privacy consent modal */
.grove-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal);
}
.grove-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.grove-modal {
  background: var(--colour-bg-surface);
  border-radius: var(--radius-3xl) var(--radius-3xl) var(--radius-2xl) var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8) var(--space-6) var(--space-6);
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  transform: translateY(40px);
  transition: transform var(--duration-slow) var(--ease-spring);
}
.grove-modal-backdrop.is-open .grove-modal {
  transform: translateY(0);
}
.grove-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.grove-modal__title {
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  color: var(--colour-text-primary);
  margin: 0;
}
.grove-modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--colour-bg-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colour-text-secondary);
  font-size: 16px;
  transition: background var(--duration-fast);
  flex-shrink: 0;
}
.grove-modal__close:hover {
  background: var(--colour-border);
}
.grove-modal__body {
  font-size: var(--size-sm);
  color: var(--colour-text-secondary);
  line-height: var(--lh-base);
  margin-bottom: var(--space-6);
}
.grove-modal__actions {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

/* ── Progress bar ────────────────────────────────────────── */
/* Source: poll vote results progress bar */
.grove-progress {
  width: 100%;
  height: 8px;
  background: var(--colour-bg-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.grove-progress__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--colour-brand-accent);
  transition: width var(--duration-slow) var(--ease-out);
}

/* Poll result row */
.grove-poll-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.grove-poll-option__header {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text-primary);
}

/* ── Skeleton ────────────────────────────────────────────── */
.grove-skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(
    90deg,
    var(--colour-bg-subtle) 25%,
    var(--colour-bg-card)   50%,
    var(--colour-bg-subtle) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
.grove-skeleton--card {
  height: var(--card-height);
  border-radius: var(--radius-3xl);  /* 28px — matches link card */
}
.grove-skeleton--text {
  height: var(--size-sm);
  width: 60%;
  border-radius: var(--radius-sm);
}
.grove-skeleton--avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-sm);
}

/* ── Link list (platform navigation links) ───────────────── */
/* Source: simple links ("Templates", etc.) in admin view */
.grove-link-list {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grove-link-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--colour-border);
  font-size: var(--size-base);
  color: var(--colour-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}
.grove-link-list__item:hover {
  color: var(--colour-brand-accent);
}
.grove-link-list__item:last-child {
  border-bottom: none;
}

/* ── Card (platform content card) ───────────────────────── */
.grove-card {
  background: var(--colour-bg-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  box-sizing: border-box;
}
.grove-card--platform {
  border: 1px solid var(--colour-border);
  box-shadow: var(--shadow-sm);
}

/* ── Review card ─────────────────────────────────────────── */
/*
  Source: reviews sheet — light cards inside a bottom sheet
  Radius 8px, bg rgba(0,0,0,0.05), padding 16px
  Avatar 40×40 object-cover; name 14px/600; date 12px @ 0.6
  Stars 16×16, colour #FBBC04, empty @ opacity 0.3
  Body 14px / line-height 22.75px; "View on Google" 12px underline
*/
.grove-review {
  border-radius: var(--radius-md);     /* 8px */
  background: rgba(0, 0, 0, 0.05);
  padding: var(--space-4);
  box-sizing: border-box;
}
.grove-review__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.grove-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.grove-review__name {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: #000;
  line-height: 1.2;
}
.grove-review__date {
  font-size: var(--size-xs);
  color: rgba(0, 0, 0, 0.6);
}
.grove-review__body {
  font-size: var(--size-sm);
  line-height: 22.75px;
  color: #000;
  margin: var(--space-3) 0 0;
}
.grove-review__link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--size-xs);
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  transition: color var(--duration-fast);
}
.grove-review__link:hover {
  color: #000;
}

/* Star rating */
.grove-stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-top: var(--space-1);
}
.grove-stars__star {
  width: 16px;
  height: 16px;
  color: #FBBC04;  /* Google review yellow — measured */
}
.grove-stars__star--empty {
  opacity: 0.3;
}

/* ── 3-dot share button ──────────────────────────────────── */
/*
  Source: absolute-positioned share affordance on cards
  24×24 (h-6 w-6), rounded-xl, opacity 0.5 → 1 on hover, hover bg black/10
*/
.grove-share-dots {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-lg);
  border: none;
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transition: opacity var(--duration-fast), background var(--duration-fast);
}
.grove-share-dots:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.10);
}
.grove-share-dots:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────
   Tabs / TabNav
   Source: nav#TabNav (linktr.ee/nicky) — measured.
   192px (w-[12rem]) pill rail, bg rgba(0,0,0,0.4) (hover 0.5), 2px padding,
   pill radius. Two 48px tab buttons (flex-grow). A white pill (z-index 10)
   slides behind the active tab; active text is black, inactive white.
   ────────────────────────────────────────────────────────── */
.grove-tabnav {
  display: flex;
  width: 192px;
  margin: 16px auto 0;            /* !mt-4 m-auto */
  padding: 2px;
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.40);
  overflow: hidden;
  transition: background-color var(--duration-normal) var(--ease-out);
}
.grove-tabnav:hover { background-color: rgba(0, 0, 0, 0.50); }
.grove-tabnav__list {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
/* Sliding white pill — sits behind the labels (z-index 1; labels are z-index 2) */
.grove-tabnav__pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;                     /* one tab of two — 100/N for N tabs */
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  z-index: 1;
  transition: transform var(--duration-normal) var(--ease-out);
}
.grove-tabnav[data-active="1"] .grove-tabnav__pill { transform: translateX(100%); }
.grove-tabnav__tab {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: #FFFFFF;                 /* inactive — over dark rail */
  cursor: pointer;
  transition: color var(--duration-normal) linear;
}
.grove-tabnav__tab[aria-selected="true"] { color: #000000; }  /* active — over white pill */
.grove-tabnav__tab:active { transform: scale(0.95); }         /* group-active:scale-95 */
.grove-tabnav__tab:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────
   Featured link card — aspect-video thumbnail head
   Source: data-layout="featured" (ROUNDED_FULL, 28px). Head is aspect-video
   with 14px inner padding; the image sits in a 20px-radius wrapper with the
   layered shadow and a 0.5px white/30 ring. Title chin sits below.
   ────────────────────────────────────────────────────────── */
.grove-link-card--featured {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;    /* override base grid */
  padding: 0;
  border-radius: var(--radius-3xl);   /* 28px — featured */
}
.grove-link-card__head {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: var(--button-inner-padding);   /* 14px */
  box-sizing: border-box;
}
.grove-link-card__head-thumb {
  width: 100%;
  height: 100%;
  border-radius: var(--button-inner-radius);  /* 20px */
  overflow: hidden;
  box-shadow:
    var(--shadow-layered),
    0 0 0 0.5px rgba(255, 255, 255, 0.30);     /* ring-[0.5px] ring-white/30 */
}
.grove-link-card__head-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.grove-link-card--featured .grove-link-card__body {
  padding: 12px var(--space-4);   /* chin py-3 */
  text-align: center;
}

/* ──────────────────────────────────────────────────────────
   Stack link card — left icon tile
   Source: data-layout="stack". A 48px icon tile is absolutely anchored
   (top/bottom/left 8px) with a 20px radius; the chin is padded px-16 (64px)
   so its centred text clears the tile. Icon is a 32px monochrome glyph.
   ────────────────────────────────────────────────────────── */
.grove-link-card--stack {
  display: block;                 /* override base grid */
  grid-template-columns: none;
}
.grove-link-card__icon-tile {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--button-inner-radius);  /* 20px */
  overflow: hidden;
  color: var(--colour-text-primary);
  z-index: 3;
}
.grove-link-card__icon-tile svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.grove-link-card--stack .grove-link-card__body {
  padding: 12px 64px;             /* py-3 px-16 — clears the icon tile */
  align-items: center;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────
   Carousel — horizontal scrolling row of cards
   Source: [data-testid="LinkCarouselItems"]. flex, 14px gap, 14px inline
   padding, 7px block padding, hidden scrollbar. Items grow & don't shrink;
   standard basis 43%, featured items basis 76.5%.
   ────────────────────────────────────────────────────────── */
.grove-carousel {
  display: flex;
  gap: var(--link-gap);           /* 14px */
  padding: 7px var(--link-gap);   /* py 7px · px 14px */
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  scrollbar-width: none;          /* Firefox */
}
.grove-carousel::-webkit-scrollbar { display: none; }   /* WebKit */
.grove-carousel > * {
  flex: 1 0 43%;                  /* grow · shrink-0 · basis-43% */
}
.grove-carousel > [data-featured="true"] {
  flex-basis: 76.5%;
}

/* ──────────────────────────────────────────────────────────
   Gallery / "Vibes" modal
   Source: data-sheet-container overlay (linktr.ee/ollyhoffman). A centred
   white dialog (32px radius), sticky 64px header, scrollable body, and a
   bottom bar over a white→transparent gradient with a black 24px-radius
   primary action and a 48px round icon button.
   ────────────────────────────────────────────────────────── */
.grove-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--link-gap);
  background: rgba(0, 0, 0, 0.40);
}
.grove-gallery-overlay[hidden] { display: none; }  /* class rule would otherwise beat [hidden] */
.grove-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  height: min(90%, 900px);
  border-radius: 32px;
  background: #FFFFFF;
  overflow: hidden;
}
.grove-gallery__header {
  position: sticky;
  top: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  background: #FFFFFF;
  z-index: 1;
}
.grove-gallery__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-lg);      /* text-md ≈ 18px */
  font-weight: var(--weight-medium);
  color: #000000;
}
.grove-gallery__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-6) 128px; /* px-6 · pb-32 (clears the footer bar) */
}
.grove-gallery__footer {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 20;
  pointer-events: none;
}
.grove-gallery__footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    #FFFFFF,
    rgba(255, 255, 255, 0.80),
    transparent
  );
}
.grove-gallery__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
}
.grove-gallery__primary {
  pointer-events: auto;
  flex: 1 1 auto;
  min-width: 128px;
  max-width: max-content;
  height: 48px;
  padding: 0 var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 24px;
  background: #000000;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background var(--duration-normal), transform var(--duration-fast);
}
.grove-gallery__primary:hover { background: #2A2A2A; }
.grove-gallery__primary:active { transform: scale(0.98); }
.grove-gallery__icon-btn {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  background: #FFFFFF;
  color: #000000;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background var(--duration-normal), transform var(--duration-fast);
}
.grove-gallery__icon-btn:hover { background: var(--colour-bg-subtle); }
.grove-gallery__icon-btn:active { transform: scale(0.95); }
.grove-gallery__primary:focus-visible,
.grove-gallery__icon-btn:focus-visible {
  outline: 2px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────
   Ambient radial-mask blur backdrop
   Source: [data-testid="profile-picture-background-blur"] and the video
   thumbnail equivalent. A blurred duplicate of the hero image is masked by a
   top-anchored radial gradient (transparent core → opaque edge) so it bleeds
   a soft glow downward behind the avatar / thumbnail.
   ────────────────────────────────────────────────────────── */
.grove-ambient-blur {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: radial-gradient(110.26% 96% at 50% 0%, transparent 60%, #000 100%);
          mask: radial-gradient(110.26% 96% at 50% 0%, transparent 60%, #000 100%);
}
.grove-ambient-blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px);
  transform: scale(1.1);          /* hide blurred edge feathering */
}