/* ============================================================================
   BitcoinPuzzles — Códigos e programas (home#codes)
   The open-source catalogue: five hardware groups, one card per repository.
   Depends on tokens.css and base.css. Loaded per-view from the template.
   ========================================================================= */

.oss {
  padding-block: var(--sp-10) var(--sp-16);
}

/* --- Head ---------------------------------------------------------------- */

.oss__head {
  margin-block-end: var(--sp-8);
}

.oss__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
}

.oss__lede {
  max-width: var(--w-prose);
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-300);
}

/* The strip's own margin closes the gap to the section below it; here the
   account link sits between the two, so the strip gives up its bottom space
   to the action rather than stacking two margins. */
.oss__ledger {
  margin-block-end: var(--sp-5);
}

.oss__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-end: var(--sp-12);
}

/* --- A category ---------------------------------------------------------- */

.oss-cat + .oss-cat {
  margin-block-start: var(--sp-12);
}

.oss-cat__head {
  margin-block-end: var(--sp-5);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--line);
}

.oss-cat__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
}

/* How many repos the group holds, seated beside its name: the reader is
   choosing a group before choosing a repo, and the count is what says whether
   there is one option here or ten. */
.oss-cat__count {
  flex: none;
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-300);
}

.oss-cat__desc {
  max-width: var(--w-prose);
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-300);
}

/* --- The cards ------------------------------------------------------------
   auto-fill rather than auto-fit: a group of one (mobile, browser) must not
   stretch its single card the full page width, which would make one repo look
   like a feature panel and the group of ten look like a list. */

.oss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.oss-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.oss-card:hover {
  background: var(--ink-800);
  border-color: var(--line-hi);
}

.oss-card:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.oss-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* The repository name is an identifier — it is typed into a clone command, so
   it is set in the machine face and never translated or truncated. */
.oss-card__name {
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-050);
  overflow-wrap: anywhere;
}

.oss-card__out {
  flex: none;
  color: var(--ink-500);
  transition: color var(--dur-1) var(--ease);
}

.oss-card:hover .oss-card__out {
  color: var(--accent);
}

.oss-card__desc {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-300);
}

/* --- The card's footing: what it is written in, and its two live figures -- */

.oss-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

/* Languages are proper nouns (Go, CUDA, Rust) and read left-to-right in every
   locale, including the " · " that joins a pair. */
.oss-card__lang {
  direction: ltr;
  unicode-bidi: isolate;
  margin-inline-end: auto;
  font-weight: 600;
  color: var(--ink-200);
}

.oss-card__stars,
.oss-card__pushed {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
}

.oss-card__stars {
  color: var(--podium-gold);
}

/* --- Footing ------------------------------------------------------------- */

/* The rule closes the page, so it runs the full container; the sentence under
   it keeps a reading measure of its own. */
.oss__footnote {
  margin: var(--sp-12) 0 0;
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-400);
}

.oss__footnote-text {
  display: block;
  max-width: var(--w-prose);
}

.oss__footnote-link {
  color: var(--ink-200);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oss__footnote-link:hover {
  color: var(--accent);
}