/* Sidebar rails — left rail (`.stat-rail`) and right rail (`.feature-shelf`)
 * of the desktop home. Both rails share structural primitives (stacked
 * widgets, sticky column, neutral compact card chrome) but differ in
 * intent:
 *
 *   .stat-rail (izquierda)   → nav + promo. Mis ligas / Mis equipos /
 *                              En directo / WC2026 promo card.
 *   .feature-shelf (derecha) → widgets data-real reusables. Poll /
 *                              Pichichi / Standings mini / Player card.
 *
 * Naming neutral (no `.ad-*`, `.promo-banner`, `.sponsored-*`).
 *
 * Visibility: the rails themselves don't toggle display — that's owned
 * by `.app__sidebar { display: none }` in mobile and the
 * `.has-desktop-shell` opt-in in desktop (see layout.css).
 *
 * Updated 2026-05-20 (Sprint 1.5 — refactor a widgets data-realistas
 * tras alineamiento con Claude Design Home-A + Home-Remix).
 */

@layer components {
  .stat-rail,
  .feature-shelf {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ─── Shared widget chrome ─────────────────────────────────────────── */

  /* Card chrome (Claude Design Home-C style): bg slightly above the
     page surface + a more visible border to separate cards from each
     other without needing extra gaps. Bg also gets a faint top-down
     gradient for depth on big screens. */
  .stat-rail__widget,
  .feature-shelf__widget {
    background:
      linear-gradient(180deg, rgb(255 255 255 / 3%) 0%, rgb(255 255 255 / 0%) 60%),
      var(--color-surface);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }

  .stat-rail__widget-header,
  .feature-shelf__widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .stat-rail__widget-title,
  .feature-shelf__widget-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-secondary);
    margin: 0;
  }

  .stat-rail__widget-hint,
  .feature-shelf__widget-hint {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-variant-numeric: tabular-nums;
  }

  /* Nav variant: thinner padding to fit more items above the fold. */
  .stat-rail__widget--nav {
    padding: var(--space-4) var(--space-3) var(--space-3);
  }

  /* ─── stat-rail: nav lists (my leagues, my teams) ─────────────────── */

  .stat-rail__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .stat-rail__nav-item {
    display: block;
  }

  .stat-rail__nav-link {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: 8px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition:
      background var(--duration-fast) var(--easing-default),
      color var(--duration-fast) var(--easing-default);
  }

  @media (hover: hover) {
    .stat-rail__nav-link:hover {
      background: var(--color-surface-hover);
      color: var(--color-text);
    }
  }

  .stat-rail__nav-item.is-active .stat-rail__nav-link {
    background: var(--color-surface-active);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-accent);
  }

  .stat-rail__nav-crest {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .stat-rail__nav-crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .stat-rail__nav-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stat-rail__nav-badge {
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-title);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ─── stat-rail: live now mini list ─────────────────────────────── */

  .stat-rail__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-live);
    box-shadow: 0 0 0 0 var(--color-live);
    animation: stat-rail-pulse 1.6s ease-in-out infinite;
  }

  @keyframes stat-rail-pulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgb(239 51 76 / 50%);
    }

    50% {
      box-shadow: 0 0 0 6px rgb(239 51 76 / 0%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .stat-rail__live-dot {
      animation: none;
    }
  }

  .stat-rail__live-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .stat-rail__live-row {
    display: block;
  }

  .stat-rail__live-link {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--duration-fast) var(--easing-default);
  }

  @media (hover: hover) {
    .stat-rail__live-link:hover {
      background: var(--color-surface-hover);
    }
  }

  .stat-rail__live-teams {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .stat-rail__live-team {
    font-size: 12px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stat-rail__live-score {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
  }

  .stat-rail__live-minute {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-live);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: right;
  }

  /* ─── stat-rail: WC2026 promo card (big, gradient, CTA) ─────────── */

  .stat-rail__promo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
  }

  .stat-rail__promo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(155deg, #5b21b6 0%, #2563eb 50%, #00d4ff 100%);
  }

  .stat-rail__promo-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 40%) 100%);
  }

  .stat-rail__promo-content {
    position: relative;
    z-index: 1;
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-text);
  }

  .stat-rail__promo-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgb(255 255 255 / 75%);
  }

  .stat-rail__promo-title {
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    text-shadow: 0 2px 12px rgb(0 0 0 / 50%);
  }

  .stat-rail__promo-countdown {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .stat-rail__promo-days {
    font-family: var(--font-title);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 12px rgb(0 0 0 / 40%);
  }

  .stat-rail__promo-days-label {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgb(255 255 255 / 85%);
  }

  .stat-rail__promo-support {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.4;
    color: rgb(255 255 255 / 80%);
    margin: 0;
  }

  .stat-rail__promo-cta {
    align-self: flex-start;
    margin-top: var(--space-2);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / 95%);
    color: #1a1a1d;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition:
      transform var(--duration-fast) var(--easing-default),
      background var(--duration-fast) var(--easing-default);
  }

  @media (hover: hover) {
    .stat-rail__promo-cta:hover {
      background: #fff;
      transform: translateY(-1px);
    }
  }

  .stat-rail__promo-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* ─── feature-shelf: match-of-day poll ─────────────────────────── */

  .feature-shelf__poll-question {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
    line-height: 1.4;
  }

  .feature-shelf__poll-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .feature-shelf__poll-button {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--duration-fast) var(--easing-default);
  }

  @media (hover: hover) {
    .feature-shelf__poll-button:hover {
      border-color: var(--color-accent);
    }
  }

  .feature-shelf__poll-bar {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      to right,
      rgb(0 225 131 / 18%) 0%,
      rgb(0 225 131 / 18%) var(--pct, 0%),
      transparent var(--pct, 0%)
    );
  }

  .feature-shelf__poll-label,
  .feature-shelf__poll-pct {
    position: relative;
    z-index: 1;
  }

  .feature-shelf__poll-pct {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
  }

  .feature-shelf__poll-meta {
    margin: var(--space-3) 0 0;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
  }

  /* Poll voter CTA — variant accent (verde grande, patrón Claude
     Design Home-Remix). Sprint 4 wires al match_poll_controller. */
  .feature-shelf__poll-cta {
    display: block;
    width: 100%;
    margin-top: var(--space-3);
    padding: 14px 16px;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition:
      transform var(--duration-fast) var(--easing-default),
      box-shadow var(--duration-fast) var(--easing-default),
      background var(--duration-fast) var(--easing-default);
  }

  .feature-shelf__poll-cta--accent {
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 6px 20px rgb(0 225 131 / 25%);
  }

  @media (hover: hover) {
    .feature-shelf__poll-cta--accent:hover {
      background: var(--color-accent-fg);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgb(0 225 131 / 35%);
    }
  }

  .feature-shelf__poll-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* Eyebrow del poll (patrón Home-Remix: "PARTIDO DEL DÍA" arriba del
     question). Pequeño badge en color accent. */
  .feature-shelf__poll-eyebrow {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: var(--space-3);
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  /* Variant para el card de poll: title del question pierde el caps
     (es una pregunta natural, no un titular). */
  .feature-shelf__widget-title--bare {
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
  }

  /* ─── feature-shelf: pichichi scorers ─────────────────────────── */

  .feature-shelf__scorers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .feature-shelf__scorers-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
  }

  .feature-shelf__scorers-rank {
    font-family: var(--font-title);
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .feature-shelf__scorers-player {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .feature-shelf__scorers-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feature-shelf__scorers-team {
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feature-shelf__scorers-numbers {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-title);
    font-variant-numeric: tabular-nums;
  }

  .feature-shelf__scorers-goals {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-accent);
  }

  .feature-shelf__scorers-goals small,
  .feature-shelf__scorers-assists small {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-left: 1px;
  }

  .feature-shelf__scorers-assists {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-secondary);
  }

  /* ─── feature-shelf: mini standings table ─────────────────────── */

  .feature-shelf__standings {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 12px;
  }

  .feature-shelf__standings-th {
    text-align: left;
    padding: 4px 6px;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10px;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .feature-shelf__standings-th--pos {
    width: 22px;
    text-align: center;
  }

  .feature-shelf__standings-th--num {
    text-align: right;
    width: 28px;
  }

  .feature-shelf__standings-row {
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .feature-shelf__standings-row:last-child {
    border-bottom: none;
  }

  .feature-shelf__standings-pos {
    width: 22px;
    padding: 6px 4px;
    text-align: center;
    font-family: var(--font-title);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    border-left: 3px solid transparent;
  }

  .feature-shelf__standings-row--champions .feature-shelf__standings-pos {
    border-left-color: var(--color-zone-champions);
  }

  .feature-shelf__standings-row--cl-playoff .feature-shelf__standings-pos {
    border-left-color: var(--color-zone-cl-playoff);
  }

  .feature-shelf__standings-row--europa .feature-shelf__standings-pos {
    border-left-color: var(--color-zone-europa);
  }

  .feature-shelf__standings-row--conference .feature-shelf__standings-pos {
    border-left-color: var(--color-zone-conference);
  }

  .feature-shelf__standings-row--relegation .feature-shelf__standings-pos {
    border-left-color: var(--color-zone-relegation);
  }

  .feature-shelf__standings-team {
    padding: 6px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
  }

  .feature-shelf__standings-num {
    padding: 6px;
    text-align: right;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .feature-shelf__standings-points {
    padding: 6px;
    text-align: right;
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
  }

  /* ─── feature-shelf: player hero card ─────────────────────────── */

  .feature-shelf__widget--accent {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-active) 100%);
  }

  /* Decorated variant: giant metric stamped behind the content
     (Claude Design Home-C pattern). `--decorated` adds the absolute
     positioning context + overflow clip so the decoration can bleed
     beyond the card edge without spilling. */
  .feature-shelf__widget--decorated {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .feature-shelf__player-decoration {
    position: absolute;
    right: -20px;
    bottom: -40px;
    z-index: 0;
    font-family: var(--font-title);
    font-size: 200px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
  }

  /* All player card children must sit above the decoration. */
  .feature-shelf__widget--decorated > *:not(.feature-shelf__player-decoration) {
    position: relative;
    z-index: 1;
  }

  .feature-shelf__player-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .feature-shelf__player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    overflow: hidden;
    flex-shrink: 0;
  }

  .feature-shelf__player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .feature-shelf__player-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .feature-shelf__player-name {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feature-shelf__player-team {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .feature-shelf__player-headline {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .feature-shelf__player-metric-value {
    font-family: var(--font-title);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .feature-shelf__player-metric-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .feature-shelf__player-support {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 0 var(--space-3);
  }

  .feature-shelf__player-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
  }

  .feature-shelf__player-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .feature-shelf__player-stat-value {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .feature-shelf__player-stat-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  /* ─── feature-shelf: Best XI pitch (sidebar) ─────────────────────
     Reusa el partial `pages/team/bestxi/_pitch.html.twig` con MISMO
     tamaño que el mobile overview (480px). Solo ajustamos los
     márgenes laterales para encajar en el ancho del widget. */

  .feature-shelf__widget--bestxi-pitch .team-bestxi__pitch {
    margin: 0 0 12px;
  }

  /* ─── feature-shelf: comp badge (logo + nombre arriba-derecha) ────
     Sustituye al `widget-hint` simple cuando el widget pertenece a
     una competición concreta. Logo 16px + nombre Oswald compacto. */

  .feature-shelf__widget-comp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
  }

  .feature-shelf__widget-comp-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .feature-shelf__widget-comp-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
  }

  /* ─── feature-shelf: CTA verde (estilo VOTAR) ─────────────────────
     Botón principal de los widgets — verde accent block (rgb 0,255,135)
     con texto negro Oswald uppercase. Reemplaza al `.link-button`
     sutil cuando queremos enfatizar la acción (Ver más / Ver clasif). */

  .feature-shelf__widget .feature-shelf__cta {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px;
    border: 0;
    border-radius: 10px;
    background: rgb(0 255 135);
    color: rgb(0 0 0);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--easing-default),
      transform var(--duration-fast) var(--easing-default);
  }

  @media (hover: hover) {
    .feature-shelf__widget .feature-shelf__cta:hover {
      background: rgb(0 230 122);
      transform: translateY(-1px);
    }
  }

  .feature-shelf__widget .feature-shelf__cta:focus-visible {
    outline: 2px solid rgb(0 255 135);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .feature-shelf__widget .feature-shelf__cta {
      transition: none;
    }

    .feature-shelf__widget .feature-shelf__cta:hover {
      transform: none;
    }
  }

  /* ─── feature-shelf: link-button local override ─────────────────
     El `.link-button` global vive en team-overview.css (scoped a
     .team-overview). Aquí lo replicamos para uso en widgets de la
     feature-shelf — mismo aspecto, distinto scope. Si se generaliza
     en >3 sitios, extraer a su propio file. */

  .feature-shelf__widget .link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: var(--space-3);
    padding: 8px 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-top: 1px solid var(--color-border-subtle);
    transition: color var(--duration-fast) var(--easing-default);
  }

  .feature-shelf__widget .link-button svg {
    width: 12px;
    height: 12px;
  }

  @media (hover: hover) {
    .feature-shelf__widget .link-button:hover {
      color: var(--color-accent);
    }
  }

  .feature-shelf__widget .link-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }
}