/* =========================================================
   links.css — the link list (Linktree-style pill buttons)
   ========================================================= */

.links {
  width: 100%;
  border-radius: calc(var(--link-height) / 2);   /* read by LaserFlow as the surface's corner radius */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Groups are kept in the data but shown as a little extra space, not a heading
   (a heading over one button is noise). Titles appear only if enabled in links.js. */
.link-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Even rhythm when titles are off; a bit of air above a titled group */
.link-group:has(.link-group__title) { margin-top: var(--space-2); }

.link-group__title {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  padding-left: var(--space-5);
}

/* Pill button: label left, handle muted, arrow right */
.link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--link-height);
  padding: 0 var(--space-5) 0 var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-control);
  background: rgba(14,14,17,.72);
  color: var(--text);
  text-decoration: none;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--fast) var(--ease),
    background-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.link__label {
  font-size: var(--text-body);
  font-weight: 600;
  white-space: nowrap;
}
.link__handle {
  margin-left: auto;                       /* pushes handle + arrow to the right */
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link__arrow {
  flex: none;
  margin-left: auto;                       /* used when there's no handle */
  color: var(--muted);
  transition: transform var(--base) var(--ease), color var(--fast) var(--ease);
}
.link__handle + .link__arrow { margin-left: 0; }

/* Press feedback everywhere; hover only on devices that can hover (Groundwork: no hover motion on touch) */
.link:active { transform: scale(.98); }
@media (hover: hover) {
  .link:hover              { border-color: rgba(103,232,249,.55); background: var(--surface); }
  .link:hover .link__arrow { transform: translateX(4px); color: var(--accent); }
}