/* css/objects.css — one class family per core object: the project card,
   the status badge, the component card, the add-on card, sprites, chips. */

/* ── Sprites: one-colour marks painted through a mask ──────────────────────── */
.bit-sprite {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--sprite) center / contain no-repeat;
  mask: var(--sprite) center / contain no-repeat;
}
.bit-sprite--xs { width: 16px; height: 16px; }
.bit-sprite--md { width: 40px; height: 40px; }

/* ── Chips ─────────────────────────────────────────────────────────────────── */
.bit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.bit-chip .bit-sprite { color: var(--accent-ink); }
.bit-chip--count { color: var(--ink-muted); }

/* ── Status badge ──────────────────────────────────────────────────────────── */
.bit-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font: 600 12.5px/1.3 var(--font-sans);
  white-space: nowrap;
  background: var(--bg-2);
  color: var(--ink-muted);
}
.bit-status svg { width: 14px; height: 14px; }
.bit-status--busy  { background: var(--accent-quiet); color: var(--accent-ink); }
.bit-status--ok    { background: var(--ok-quiet); color: var(--ok); }
.bit-status--error { background: var(--rust-quiet); color: var(--rust); }
.bit-status--lg { padding: 6px 14px; font-size: 14px; }
.bit-status--lg svg { width: 16px; height: 16px; }

/* ── Project card ──────────────────────────────────────────────────────────── */
.bit-pgrid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.bit-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-border);
  background: var(--bg-1);
  box-shadow: var(--sh-1), inset 0 1px 0 var(--card-emboss);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: fadeUp 220ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.bit-pcard:active { transform: scale(0.99); }
.bit-pcard__top { display: flex; align-items: flex-start; gap: var(--s-3); }
.bit-pcard__name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.bit-pcard__name a { color: var(--ink); text-decoration: none; }
/* The title link covers the card, so the whole card opens the project. */
.bit-pcard__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bit-pcard__name a:focus-visible { outline: none; }
.bit-pcard:has(.bit-pcard__name a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bit-pcard__slug {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.bit-pcard__slug svg { width: 14px; height: 14px; }
.bit-pcard__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bit-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; min-height: 44px; }
.bit-pcard__when { color: var(--ink-faint); font-size: 13px; }
.bit-pcard__repo { position: relative; z-index: 1; }
@media (hover: hover) {
  .bit-pcard:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
}

/* ── Component card (radio) ────────────────────────────────────────────────── */
.bit-cgrid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.bit-ccard {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--bg-1);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  animation: fadeUp 200ms var(--ease) both;
}
.bit-ccard:active:not(:disabled) { transform: scale(0.99); }
.bit-ccard[aria-checked="true"] { border-color: var(--accent); background: var(--accent-quiet); }
.bit-ccard:disabled { cursor: not-allowed; opacity: 0.62; }
.bit-ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bit-ccard__row { display: flex; align-items: flex-start; gap: var(--s-3); }
.bit-ccard .bit-sprite { color: var(--accent-ink); }
.bit-ccard:disabled .bit-sprite { color: var(--ink-faint); }
.bit-ccard__text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.bit-ccard__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; font-size: 15.5px; }
.bit-ccard__desc { color: var(--ink-muted); font-size: 13.5px; line-height: 1.45; }
.bit-ccard__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
}
.bit-ccard[aria-checked="true"] .bit-ccard__tick { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.bit-ccard__tick svg { width: 14px; height: 14px; }
.bit-ccard--admin { cursor: default; display: grid; gap: var(--s-3); animation: none; }
@media (hover: hover) {
  .bit-ccard:hover:not(:disabled):not(.bit-ccard--admin) { border-color: var(--line-strong); }
  .bit-ccard[aria-checked="true"]:hover { border-color: var(--accent); }
}

/* ── Add-on card (checkbox) ────────────────────────────────────────────────── */
.bit-agrid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.bit-acard {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--bg-1);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  animation: fadeUp 200ms var(--ease) both;
}
.bit-acard:active { transform: scale(0.99); }
.bit-acard[aria-checked="true"] { border-color: var(--accent); background: var(--accent-quiet); }
.bit-acard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bit-acard .bit-sprite { color: var(--accent-ink); }
.bit-acard__text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.bit-acard__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; }
.bit-acard__desc { color: var(--ink-muted); font-size: 13.5px; line-height: 1.45; }
.bit-acard__note { color: var(--accent-ink); font-size: 12.5px; font-weight: 600; }
.bit-acard--row { cursor: default; border: 0; padding: var(--s-2) 0; background: none; animation: none; }
.bit-acard--row .bit-sprite { width: 28px; height: 28px; }
.bit-acard--admin { cursor: default; flex-direction: column; animation: none; }
.bit-acard__main { display: flex; gap: var(--s-3); align-items: flex-start; width: 100%; }
@media (hover: hover) {
  .bit-acard:hover:not(.bit-acard--row):not(.bit-acard--admin) { border-color: var(--line-strong); }
  .bit-acard[aria-checked="true"]:hover { border-color: var(--accent); }
}

/* The switch inside an add-on card; the card itself is the control. */
.bit-switch {
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin-top: 2px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  transition: background 0.15s;
}
.bit-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-muted);
  transition: transform 0.18s var(--ease), background 0.15s;
}
.bit-acard[aria-checked="true"] .bit-switch { background: var(--accent-fill); border-color: var(--accent-fill); }
.bit-acard[aria-checked="true"] .bit-switch__knob { transform: translateX(18px); background: var(--on-accent); }