/* Spaces build 3 (lane live-room): a running space's Live tab (js/spaces/home-live.js). The live room itself is the
 * one every call uses, as dev has it (Q8, 28 Oct 2026). Every class is namespaced sphl- (the tidy-ups' sph- switch rows
 * and chips are reused as they are). App tokens only (design-tokens.css), scoped under #route-spaces like
 * community-spaces.css. The look is the approved artifact's
 * (docs/projects/spaces-challenge-thesis/parts/home.css: the hero, the dated rows, Maya's notes, the comments). */

/* P12 (28 Oct 2026): the Live tab's cards, rows, the next-call card (ch-next), Maya's notes (ch-rm), the chips (ch-st)
 * and the buttons are the course home's kit (css/funnel-home.css, css/course-home.css). What stays here is only what
 * the kit has no piece for, on its tokens: the faces on a call, the recordings line, the chapters, and the comments. */
#route-spaces .sphl-i { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
#route-spaces .ch-next .fh-todo-ic svg { width: 16px; height: 16px; }
#route-spaces .ch-next-t .slr-ready, #route-spaces .ch-next-t .slr-allow { font-size: 12.5px; color: var(--fh-text-3); margin-top: 4px; }
#route-spaces .sphl-fl { margin-top: 6px; }
#route-spaces .sphl-num { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fh-text-2);
  background: var(--fh-surface); border: 1px solid var(--fh-border); border-radius: 999px; padding: 2px 10px 2px 3px; }
#route-spaces .sphl-faces { display: inline-flex; }
#route-spaces .sphl-faces img, #route-spaces .sphl-face0 { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--fh-surface); object-fit: cover; margin-left: -5px; background: var(--fh-surface-3); color: var(--fh-text-3); display: inline-grid; place-items: center; }
#route-spaces .sphl-faces > :first-child { margin-left: 0; }
#route-spaces .sphl-face0 .sphl-i { width: 12px; height: 12px; }
#route-spaces .sphl-date.skip b { color: var(--fh-text-3); }
#route-spaces .sphl-date .sph-move-narrow { display: none; }

/* Recent calls: the recordings, Maya's notes, the chapters, the comments. */
#route-spaces .sphl-pastc + .sphl-pastc { border-top: 1px solid var(--fh-border); }
#route-spaces .sphl-pastc > .ch-row { border-top: 0; }
#route-spaces .sphl-recs { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 16px 10px; font-size: 13px; color: var(--fh-text-2); }
#route-spaces .sphl-recs span { display: inline-flex; gap: 6px; align-items: center; }
#route-spaces .sphl-recs .sphl-i { width: 15px; height: 15px; color: var(--fh-accent); }
#route-spaces .sphl-mnotes p { margin: 0; color: var(--fh-text-2); line-height: 1.5; }
#route-spaces .sphl-mnotes p.sphl-step { color: var(--fh-text); font-weight: 500; }
#route-spaces .sphl-chaps { display: flex; flex-wrap: wrap; gap: 6px; }
#route-spaces .sphl-chaps span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fh-text-2); background: var(--fh-surface); border: 1px solid var(--fh-border); border-radius: 999px; padding: 2px 10px 2px 3px; }
#route-spaces .sphl-chaps code { font-family: var(--fh-mono); font-size: 11px; color: var(--fh-accent-deep); background: var(--fh-accent-soft); border-radius: 999px; padding: 1px 6px; }
#route-spaces .sphl-vcoms { display: flex; flex-direction: column; gap: 8px; }
#route-spaces .sphl-vcom { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
#route-spaces .sphl-av { width: 32px; height: 32px; border-radius: 50%; background: var(--fh-surface-3); color: var(--fh-text-3); display: grid; place-items: center; }
#route-spaces .sphl-vcom p { margin: 2px 0 6px; font-size: 14px; }
#route-spaces .sphl-vthumb { position: relative; width: 200px; max-width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--text); display: block; }
#route-spaces .sphl-vthumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
#route-spaces .sphl-vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: var(--text); }
#route-spaces .sphl-vlen { position: absolute; right: 8px; bottom: 8px; background: rgba(21, 23, 43, .7); color: #fff; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 1px 6px; }
#route-spaces .sphl-vbox { display: flex; flex-direction: column; gap: 8px; }
#route-spaces .sphl-vbox .field input { width: 100%; }
#route-spaces .sphl-vpick { display: flex; flex-direction: column; gap: 6px; }
#route-spaces .sphl-vpicked { display: inline-flex; gap: 4px; align-items: center; }

@media (max-width: 620px) {
  #route-spaces .sphl-recs { padding-left: 14px; padding-right: 14px; }
}
/* The next call is the course home's Next card (ch-next): on a phone its buttons take their own line under the words,
   as the course's one button does (course-home.css at 640px), rather than squeezing the words to a letter a line. */
@media (max-width: 640px) {
  #route-spaces .sphl-hero .sphl-ta { flex: 1 1 100%; }
}