.mf{display:grid;gap:0}

/* ------------------------------------------------------------ controls */
.mf__bar{
  display:flex;flex-wrap:wrap;gap:.85rem 1.4rem;align-items:center;justify-content:space-between;
  padding:clamp(.9rem,2vw,1.3rem);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:3;background:rgba(16,18,25,.94);backdrop-filter:blur(10px);
}
.mf__chips{gap:.4rem}
.mf__sels{gap:.4rem}
.mf__chip[data-st="in"] .chip__dot{color:var(--cyan)}
.mf__chip[data-st="out"] .chip__dot{color:var(--slate)}
.mf__chip[data-st="disputed"] .chip__dot{color:var(--amber)}
.mf__chip[aria-pressed="true"][data-st="in"]{background:var(--cyan);border-color:var(--cyan)}
.mf__chip[aria-pressed="true"][data-st="out"]{background:var(--slate);border-color:var(--slate)}
.mf__chip[aria-pressed="true"][data-st="disputed"]{background:var(--amber);border-color:var(--amber)}
.mf__chip[aria-pressed="true"] .chip__dot{color:#04121b}

.mf__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline;justify-content:space-between;
  padding:.85rem clamp(.9rem,2vw,1.3rem);border-bottom:1px solid var(--line);
}
.mf__sum{display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:baseline;font-size:.82rem;color:var(--text-3)}
.mf__sum b{color:var(--text);font-weight:500}
.mf__sum em{font-style:normal;color:var(--text-4)}
.mf__sum-sep{color:var(--text-4)}
.mf__sum-note{
  flex-basis:100%;font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;
  color:var(--amber);line-height:1.5;
}

/* ---------------------------------------------------------------- grid */
/* 1px gap + a ring on each card gives hairline dividers WITHOUT painting the
   grid's unfilled trailing cells. */
.mf__grid{
  display:grid;gap:1px;background:transparent;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}
.mf__grid.is-empty{grid-template-columns:1fr;padding:clamp(1rem,3vw,2rem)}

.mf__card{
  position:relative;background:var(--surface);padding:1rem 1.05rem 1.05rem 1.25rem;
  display:grid;gap:.45rem;align-content:start;min-width:0;
  box-shadow:0 0 0 1px var(--line);
  animation:mfIn var(--dur-3) var(--ease) both;animation-delay:var(--d,0ms);
  transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
@keyframes mfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.mf__card{animation:none}}
.mf__card:hover{background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2)}

.mf__stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--st)}
.mf__card.st-out .mf__stripe{background:repeating-linear-gradient(180deg,var(--slate) 0 4px,transparent 4px 8px)}
.mf__card.st-disputed .mf__stripe{background:repeating-linear-gradient(180deg,var(--amber) 0 3px,transparent 3px 6px)}

.mf__top{display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:baseline;justify-content:space-between}
.mf__n{font-size:1.18rem;font-weight:500;color:var(--st);letter-spacing:-.03em;line-height:1.1}
.mf__nocount{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-4);border:1px dashed var(--line-2);border-radius:2px;padding:.2rem .45rem;
}
.mf__tag{font-size:.55rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--st);opacity:.85;white-space:nowrap}
.mf__card.st-out .mf__tag,.mf__card.st-out .mf__n{color:var(--slate)}

.mf__name{font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1.3;letter-spacing:-.008em;color:var(--text)}
.mf__extra{font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4)}
.mf__det{font-size:.82rem;line-height:1.5;color:var(--text-3)}
.mf__grp{font-size:.6rem;color:var(--text-4);margin-top:.15rem}

.mf__side{display:inline-flex;align-items:baseline;gap:.1rem;margin-left:.3rem}
.mf__side em{
  font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-4);margin-right:.15rem;
}

.mf__empty{grid-column:1/-1}
.mf__empty .empty{border-color:var(--line-2)}

@media (max-width:640px){
  .mf__bar{position:static;gap:.7rem;padding:.9rem}
  .mf__chips,.mf__sels{width:100%}
  .mf__chip{flex:1 1 auto;justify-content:center;min-height:2.5rem}
  .mf__sels .sel{flex:1 1 auto;min-height:2.5rem}
  .mf__reset{min-height:2.5rem}
  .mf__grid{grid-template-columns:1fr}
  .mf__meta{padding:.8rem .9rem}
}