/* The shelf: takes, as rows.
 *
 * Rows and not cards. A take is a file with four facts about it, and four facts
 * are a table — a card per take would be a gallery of identical boxes, and the
 * one thing you want to do (find the take from ten minutes ago and watch it) is
 * harder to do in a gallery than in a list. */

.cap-rec { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }

.cap-rec-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.cap-rec-empty { color: var(--ink-3); font-size: .8125rem; padding: 8px 0; }

.cap-rec-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto auto auto 24px 24px;
  align-items: center; gap: 10px; padding: 7px 4px;
  border-top: var(--rule) solid var(--hairline);
}
.cap-rec-row:first-child { border-top: none; }
.cap-rec-row:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }

.cap-rec-row .nm {
  font-family: var(--mono); font-size: .75rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-rec-row .meta {
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cap-rec-row .meta.dim { color: var(--ink-3); }
/* The resolution and the date are the two facts you need only when looking for
   a specific take, so they are the two that fold away in a narrow panel. */
@media (max-width: 1100px) { .cap-rec-row .meta.dim { display: none; } }
@media (max-width: 760px) { .cap-rec-row .meta:nth-of-type(1) { display: none; } }

.cap-rec-play, .cap-rec-dl, .cap-rec-del {
  display: grid; place-items: center; border-radius: 50%;
  border: var(--rule) solid var(--hairline-2); background: transparent;
  color: var(--ink-2); cursor: pointer; width: 24px; height: 24px; padding: 0;
}
.cap-rec-play { border-color: transparent; background: var(--interactive, var(--ink)); color: var(--paper); }
.cap-rec-play:hover { opacity: .85; }
.cap-rec-dl { text-decoration: none; }
.cap-rec-dl:hover { color: var(--ink); border-color: var(--ink-3); }
.cap-rec-del { border-color: transparent; font-size: .9375rem; line-height: 1; width: 22px; }
.cap-rec-del:hover { color: var(--accent); }

/* ── the player ──────────────────────────────────────────────────────── */
.cap-rec-player {
  flex: none; border-radius: var(--r-sm, 10px); overflow: hidden;
  border: var(--rule) solid var(--hairline); background: var(--ink);
}
.cap-rec-player[hidden] { display: none; }
.cap-rec-phead {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 11px;
  font-family: var(--mono); font-size: .6875rem; color: color-mix(in oklab, var(--paper) 70%, transparent);
}
.cap-rec-phead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-rec-phead button {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: inherit; font-size: 1.0625rem; line-height: 1; padding: 0 4px;
}
.cap-rec-player video { display: block; width: 100%; max-height: 46vh; background: color-mix(in oklab, var(--ink) 92%, black); }

.cap-rec-hint {
  flex: none; font-size: .78125rem; line-height: 1.5; color: var(--ink-3);
  border-top: var(--rule) solid var(--hairline); padding-top: 9px;
}
.cap-rec-hint[hidden] { display: none; }