/**
 * Marbl repo-widget canonical CSS.
 * Spec: ./repo-widget.md
 *
 * Two variants:
 *   .repo-widget--filled       solid card, body-content placement
 *   .repo-widget--transparent  no background, sidebar/aux placement
 *
 * The action buttons inside the widget use the canonical ui-items button
 * classes (.btn .btn--fill-up.btn--mini, .btn.btn--outline.btn--mini) -
 * NOT bespoke styles. Consumers must vendor ui-items/button.css alongside.
 *
 * All values from marbl-v2.css tokens. No invented px values.
 */

.repo-widget {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs, 10px);
  padding: var(--gap-sm, 20px);
  border-radius: var(--radius, 10px);
  background: var(--marbl-charcoal-light, #1d1a1b);
  border: 1px solid var(--marbl-white-08, rgba(255, 255, 255, 0.08));
  font-family: var(--font-body, var(--marbl-font-body, 'Inter', sans-serif));
  color: var(--marbl-white-85, rgba(255, 255, 255, 0.85));
}

/* Transparent variant - sidebar use */
.repo-widget--transparent {
  background: transparent;
  border: 1px solid var(--marbl-white-10, rgba(255, 255, 255, 0.1));
  padding: var(--gap-sm, 20px);
}

/* Hide filled-only chrome inside transparent variant */
.repo-widget--transparent .repo-widget__description--filled-only {
  display: none;
}

/* ===== Header ============================================================= */

.repo-widget__header {
  display: flex;
  align-items: center;
  gap: var(--gap-xs, 10px);
  min-width: 0;
}

.repo-widget__icon {
  width: var(--icon-lg, 20px);
  height: var(--icon-lg, 20px);
  flex-shrink: 0;
  fill: var(--marbl-white-70, rgba(255, 255, 255, 0.7));
}

.repo-widget__name {
  margin: 0;
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-widget__name a {
  color: var(--marbl-white, #ffffff);
  text-decoration: none;
  transition: color 150ms ease;
}

.repo-widget__name a:hover,
.repo-widget__name a:focus-visible {
  color: var(--marbl-ember, #F35226);
}

.repo-widget__name a:focus-visible {
  outline: 2px solid var(--marbl-ember, #F35226);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 5px);
}

/* ===== Description ======================================================== */

.repo-widget__description {
  margin: 0;
  font-size: var(--text-sm, 13px);
  line-height: 1.5;
  color: var(--marbl-white-70, rgba(255, 255, 255, 0.7));
}

/* ===== Meta row =========================================================== */

.repo-widget__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2xs, 8px);
  font-size: var(--text-xs, 11px);
  color: var(--marbl-white-65, rgba(255, 255, 255, 0.65));
}

.repo-widget__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-3xs, 5px);
  white-space: nowrap;
}

.repo-widget__stat a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-3xs, 5px);
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}

.repo-widget__stat a:hover,
.repo-widget__stat a:focus-visible,
.repo-widget__stat a:hover .repo-widget__stat-value,
.repo-widget__stat a:focus-visible .repo-widget__stat-value,
.repo-widget__stat a:hover .repo-widget__stat-label,
.repo-widget__stat a:focus-visible .repo-widget__stat-label {
  color: var(--marbl-ember, #F35226);
}

.repo-widget__stat a:focus-visible {
  outline: 2px solid var(--marbl-ember, #F35226);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 5px);
}

.repo-widget__stat-icon {
  width: var(--icon-xs, 12px);
  height: var(--icon-xs, 12px);
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.85;
}

.repo-widget__stat-value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--marbl-white-85, rgba(255, 255, 255, 0.85));
}

.repo-widget__stat-label {
  color: var(--marbl-white-50, rgba(255, 255, 255, 0.5));
}

/* ===== Actions ============================================================
   Buttons are the canonical .btn / .btn--fill-up / .btn--outline / .btn--mini
   pattern from ui-items/button.css. The footer is a flex container only;
   button styling lives in the canonical button.css and must be vendored
   alongside this component. */

/* DEFAULT button layout: inline at content-natural widths, wrap if tight.
   Visual variant (--filled / --transparent) is INDEPENDENT of layout -
   either visual variant uses the default inline layout unless the
   --stack-actions modifier is added (see below). */
.repo-widget__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs, 10px);
  margin-top: var(--gap-3xs, 5px);
}

/* MODIFIER --stack-actions: opt-in vertical stack with full-width buttons.
   For narrow contexts (sidebars, rails). Composable with either visual
   variant. Apply alongside --transparent for the typical sidebar use. */
.repo-widget--stack-actions .repo-widget__actions {
  flex-direction: column;
  align-items: stretch;
}
.repo-widget--stack-actions .repo-widget__actions .btn {
  width: 100%;
  justify-content: center;
}

/* MOBILE (any variant, any modifier): buttons collapse to inline 50/50
   equal-width. Overrides --stack-actions on small viewports because
   stacking on a phone wastes vertical space. */
@media (max-width: 768px) {
  .repo-widget .repo-widget__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .repo-widget .repo-widget__actions .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: var(--gap-2xs, 8px);
    padding-right: var(--gap-2xs, 8px);
    justify-content: center;
  }
}

/* ===== Reduced motion ===================================================== */

/* Hide filled-only stats inside transparent variant (e.g. version). */
.repo-widget--transparent .repo-widget__stat--filled-only {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .repo-widget__name a,
  .repo-widget__stat a {
    transition: none;
  }
}