/* Spaces build (24 Oct 2026): the home-tidy area's styles. Every class is namespaced (base spx-, guide spg-, kinds spk-, content spt-, home-tidy sph-).
 *
 * The tidy-ups ADDED to a running space's existing tabs (js/spaces/home-tidy.js): Move and the clash card, the time
 * for every call, After the call, Meet in person, Where members book, Waiting for your yes, Claims, Add someone, the
 * Completion boost row and the one-to-one calls sheet.
 *
 * P12 (28 Oct 2026): the cards, rows, switches, choices, fields and buttons are the course home's kit
 * (css/funnel-home.css, css/course-home.css) and "Waiting for your yes" is the course's control centre card
 * (css/control-centre.css). What stays here is only what the kit has no piece for, on its tokens: the Move panel, the
 * clash card's radio dot, the booking panel's preview in the site's look, and the two pieces in a CBSheet. */

#route-spaces .sph-ic { flex: 0 0 auto; vertical-align: -3px; }

/* Live: Move under a call, the clash card, the time for every call. */
#route-spaces .sph-movechips, #route-spaces .sph-movebox {
  margin: 0 16px 12px; padding: 12px 14px; border-radius: 10px; background: var(--fh-surface-2); border: 1px solid var(--fh-border); display: flex; flex-direction: column; gap: 8px;
}
#route-spaces .sph-movebox { margin: 12px 16px 0; }
#route-spaces .sph-clash { display: flex; flex-direction: column; gap: 10px; }
#route-spaces .sph-clash-h { display: flex; align-items: center; gap: 8px; }
#route-spaces .sph-clash-line { display: flex; align-items: center; gap: 10px; line-height: 1.45; }
#route-spaces .sph-pick { text-align: left; background: var(--fh-surface); font: inherit; color: var(--fh-text); }
#route-spaces .sph-pick i { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--fh-border-strong); box-sizing: border-box; }
#route-spaces .sph-pick.on { border-color: var(--fh-accent); background: var(--fh-accent-soft); }
#route-spaces .sph-pick.on i { border: 5px solid var(--fh-accent); }
#route-spaces .sph-pick span span { display: block; font-size: 12.5px; color: var(--fh-text-2); margin-top: 1px; }

/* Booking: the panel's preview, in the site's look, and the sheet. */
#route-spaces .sph-panelprev { padding: 10px; border-radius: 10px; background: var(--fh-surface-2); display: flex; flex-direction: column; gap: 8px; }
#route-spaces .sph-cap { font-family: var(--fh-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fh-text-3); }
#route-spaces .sph-bar {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--fh-accent-deep); color: #fff; flex-wrap: wrap;
}
#route-spaces .sph-bar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .7); }
#route-spaces .sph-bar > span:not(.sph-barbtn) { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#route-spaces .sph-bar small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; opacity: .85; }
#route-spaces .sph-bar b { font-size: 16px; }
#route-spaces .sph-bar > span > span { font-size: 13px; opacity: .9; }
#route-spaces .sph-barbtn { padding: 9px 16px; border-radius: 10px; background: #fff; color: var(--fh-accent-deep); font-weight: 700; font-size: 14px; }
#route-spaces .sph-sheet { max-width: 520px; border: 1px solid var(--fh-border); border-radius: 12px; overflow: hidden; }
#route-spaces .sph-blink-in { flex: 1 1 260px; min-width: 0; }

/* Members: Add someone, and the email they get. */
#route-spaces .sph-addf { border-bottom: 1px solid var(--fh-border); background: var(--fh-surface-2); }
#route-spaces .sph-drafttext { white-space: pre-line; color: var(--fh-text-2); line-height: 1.5; }

/* "Waiting for your yes": the preview line of each one, two lines at most. */
#route-spaces .sph-pending .sph-pend-pv {
  color: var(--fh-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Its heading keeps its line on a phone: the calendar button moves under it, rather than squeezing it a word a line. */
#route-spaces .sph-pending .cin-needs-h { flex-wrap: wrap; }
#route-spaces .sph-pending .cin-needs-h h2 { min-width: min(100%, 200px); }
/* "N waiting" on the Spaces list card (the list keeps the app's look). */
#route-spaces .sph-waitpill { font-weight: 700; }

/* The one-to-one calls sheet (a CBSheet, so outside #route-spaces). */
.sph-offopts p { margin: 0 0 10px; line-height: 1.45; }
.sph-offopts .sph-faint, .rel-editor .sph-lab { font-size: 13px; color: var(--text-3); }
.rel-editor .sph-f { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.rel-editor .sph-f textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font: inherit; }

#route-spaces .sph-move-narrow { display: none; margin-top: 6px; }
@media (max-width: 600px) {
  #route-spaces .sph-move-wide { display: none; }
  #route-spaces .sph-move-narrow { display: inline-flex; }
  #route-spaces .sph-movechips, #route-spaces .sph-movebox { margin-left: 12px; margin-right: 12px; }
}