/* Resources for one sub-pointer (site/res.js): Required, then Optional; videos as cards. */
.res { display: grid; gap: var(--s3, 12px); margin: var(--s2, 8px) 0; }
.res-label { font-size: var(--fs-sm, 13px); color: var(--muted, #7a7366); margin: 0 0 var(--s1, 4px); }
.res-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3, 12px); }
.res-video { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s2, 8px); align-items: start; text-decoration: none; color: inherit;
  border: var(--hair, 1px solid #ddd); border-radius: var(--radius, 6px); padding: var(--s2, 8px); background: var(--surface, transparent); }
.res-video:hover { border-color: var(--accent, currentColor); }
.res-video:hover .res-title { color: var(--accent, inherit); }
.res-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--sunken, #eee); }
.res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-len { position: absolute; right: 4px; bottom: 4px; font-size: var(--fs-xs, 12px); line-height: 1.3; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, .78); color: #fff; }
.res-vtext { display: grid; gap: 2px; min-width: 0; }
.res-title { font-weight: var(--w-strong, 600); font-size: var(--fs-sm, 13px); line-height: 1.35; }
.res-ch, .res-why { font-size: var(--fs-xs, 12px); color: var(--muted, #7a7366); line-height: 1.35; }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1, 4px); }
.res-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2, 8px); }
.res-row .res-why { flex-basis: 100%; }
.res-tag { font-size: var(--fs-xs, 12px); color: var(--muted, #7a7366); border: var(--hair, 1px solid #ddd); border-radius: 3px; padding: 0 4px; }
.res-m { font-size: var(--fs-xs, 12px); color: var(--muted, #7a7366); }
@media (max-width: 520px) { .res-video { grid-template-columns: 96px minmax(0, 1fr); } }
/* host pages style links in their panels as chips; a resource row stays plain text at body size */
.res a.res-link, .res span.res-link { border: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; font-size: var(--fs-md, 15px); line-height: 1.45; }
.res a.res-video { box-shadow: none; }

/* For later: park a whole course in a stream's backlog without leaving the step. */
.res-vcell { display: flex; flex-direction: column; gap: 4px; }
.res-save { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs, 12px); color: var(--muted); }
.res-row .res-save { margin-left: var(--s2, 8px); }
.res-save-b { font: inherit; font-size: var(--fs-xs, 12px); padding: 1px 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm, 4px); background: var(--surface); color: var(--soft); cursor: pointer; }
.res-save-b:hover { color: var(--accent); border-color: var(--accent); }
.res-save-s { font: inherit; font-size: var(--fs-xs, 12px); padding: 1px 4px; border: 1px solid var(--rule); border-radius: var(--radius-sm, 4px); background: var(--surface); color: var(--ink); }
.res-saved { color: var(--ok); }

/* An explainer video made for this step, played in place. */
/* host pages give figure a paper card for diagrams; a video is not a diagram */
figure.res-clip, figure.ln-clip { margin: 0 0 var(--s3, 12px); padding: 0; background: none; border: 0; color: inherit; overflow: visible; }
.res-clip video { display: block; width: 100%; max-width: 720px; border-radius: var(--radius, 6px); background: #000; aspect-ratio: 16 / 9; }
.res-clip-cap { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-top: 6px; }
.res-len-t { font-size: var(--fs-xs, 12px); color: var(--muted); }

/* the video's own bar: speed, open in a new tab, copy the file path */
.res-vbar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.res-vb { font: inherit; font-size: var(--fs-xs, 12px); padding: 2px 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm, 4px); background: var(--surface); color: var(--soft); cursor: pointer; text-decoration: none; }
.res-vb:hover { color: var(--accent); border-color: var(--accent); }
.res-keys { flex-basis: 100%; font-size: var(--fs-xs, 12px); color: var(--muted); }
.res-vb.on { color: var(--accent); border-color: var(--accent); font-weight: 600; }