/* The library card as a list item (2026-09-09). Loaded after style.css and
   overrides only the card; the grid, the bar and the search keep style.css's
   rules. Cover, title, artist, one facts line, the closest fit, two buttons.
   No count of runs, no verdict, nothing decorative. */

/* The face is a <button>, and a button's intrinsic width is its content's: a
   long label name on the fit line would widen it past the card and spill the
   score over the edge. Pinned to the card's width, with the card itself
   allowed to be narrower than its content (a grid item's default min-width
   is auto, which is the same leak one level up). */
.t-card { min-width: 0; }
.t-card-open { gap: 4px; width: 100%; max-width: 100%; }
.t-card-title { margin-top: 2px; }

/* tempo · key · length. Tabular figures so a column of cards lines up. */
.t-card-facts {
  font-size: 12px; color: var(--muted); margin-top: 1px;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-card-dot { color: var(--text-3); margin: 0 1px; }
.t-card-failed { color: var(--text-2); white-space: normal; }

/* The closest fit from the latest run. A rule above it, as the score row had:
   it is the one line the eye lands on, and it is not coloured — a number beside
   a label name is a fit, and the studio holds the caveats. */
.t-card-fit {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 8px; min-width: 0; width: 100%;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.3;
}
.t-card.open .t-card-fit { border-top-color: var(--border-2); }
.t-card-fit-k { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.t-card-fit-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-card-fit-score {
  justify-self: end; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.t-card-fit.muted { display: block; color: var(--muted); }

/* The button row: a real gap between the buttons and real air above them, so
   the fit line never sits on a button. Buttons split the width; a lone "Open"
   takes it all. */
.t-card-acts { display: flex; gap: 10px; margin-top: 12px; }
.t-card-acts .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; align-self: stretch; margin: 0; }
/* style.css still gives .t-card-test the old layout's align-self and top
   margin (it sat under the score row on its own); in a row it must sit level
   with "Open". Stated at the same specificity as the line above, later. */
.t-card-acts .t-card-test { align-self: stretch; margin-top: 0; }
.t-card.is-pending .t-card-acts { margin-top: 14px; }

/* ---------- analyzing ----------
   The measurement has not landed. The cover carries a translucent veil of the
   card's own ground with "Analyzing…" and a small spinner; title and artist
   sit below it at full contrast, because the producer who just uploaded is
   looking for their track by name. No numbers: there are none yet. */
.t-face { position: relative; }
.t-card-veil {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; text-align: center; padding: 8px;
  background: rgba(255, 255, 255, 0.74);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--text);
}
.t-card-veil-text { font-size: 12.5px; font-weight: 500; letter-spacing: 0.1px; }
.t-card-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-2); border-top-color: var(--text);
  animation: t-card-spin 0.9s linear infinite;
}
@keyframes t-card-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .t-card-spin { animation: none; border-top-color: var(--border-2); border-color: var(--text); }
}
.t-card.is-pending .t-face-glyph { opacity: 0.5; }

/* The one-line limit above the grid, folded (2026-09-09). */
.notice-fold { padding: 10px 14px; }
.notice-fold summary { cursor: pointer; font-weight: 600; list-style: none; }
.notice-fold summary::-webkit-details-marker { display: none; }
.notice-fold summary::before { content: '+'; display: inline-block; width: 16px; color: var(--muted); }
.notice-fold[open] summary::before { content: '−'; }
.notice-fold[open] summary { margin-bottom: 6px; }