/* Eyuel Sisay — additions on top of the reference stylesheet.
   assets/css/site.css is the original Tailwind build, kept byte-for-byte so it
   stays a trustworthy reference. Only these few classes are missing from it. */

/* ------------------------------------------------------------ tech pills */
/* Labels ship at width:0px; site.js sets the measured width on hover/focus. */
.tech-pill {
  cursor: default;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}

.tech-pill span + span {
  display: inline-block;
  transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--color-foreground);
}

.tech-pill:hover,
.tech-pill:focus-visible {
  background-color: var(--color-tag-bg);
  border-color: var(--color-border-dark);
  outline: none;
}

/* ------------------------------------------------------------ filter tabs */
.filter-tab {
  cursor: pointer;
  color: var(--color-muted-foreground);
  background-color: var(--color-project-card-inner);
  transition: color 200ms ease-out, background-color 200ms ease-out;
}

.filter-tab:hover,
.filter-tab:focus-visible {
  color: var(--color-foreground);
  outline: none;
}

.filter-tab.is-active {
  color: var(--color-foreground);
  background-color: var(--color-tag-bg);
  border-color: var(--color-border-dark);
}

/* --------------------------------------------------------- card media slot */
/* Dashed placeholder shown until a real screenshot is dropped in at the
   card's data-media-slot path. */
.card-media {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-border-subtle) 0,
    var(--color-border-subtle) 1px,
    transparent 1px,
    transparent 8px
  );
}

.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease-out;
}

.group:hover .card-media img {
  transform: scale(1.05);
}

/* ------------------------------------------------------------------ clock */
[data-clock] {
  color: var(--color-foreground);
}

/* Text placeholders should never read as finished content. */
[data-visits],
[data-todo] {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Layout utilities the mirrored Tailwind build never emitted.
   site.css is a purged production build; it only contains classes the
   reference pages happened to use. These handful are used by this clone but
   have no rule in that file, so they are declared here explicitly rather than
   silently doing nothing. (The reference itself ships an undefined
   `leading-wide`; that one is left alone to stay faithful.)
   ------------------------------------------------------------------------- */
.ml-1 {
  margin-left: 0.25rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pb-0 {
  padding-bottom: 0;
}
.border-b-0 {
  border-bottom-width: 0;
}
.-space-x-1 > :not(:last-child) {
  margin-right: -0.25rem;
}
.-space-x-2 > :not(:last-child) {
  margin-right: -0.5rem;
}
.h-4\.5 {
  height: 1.125rem;
}
.w-4\.5 {
  width: 1.125rem;
}