/* community-spaces.css — Community → Spaces (js/community-spaces.js).
 *
 * App-shell tokens only, no raw hex. Everything is scoped under #route-spaces
 * so nothing here can reach another screen; the tab strip, tiles and rows are
 * the course page's own .cpg-* rules (css/course-page.css), reused by wrapping
 * the space view in .cpg-page. Mobile first; the desktop block is at the end.
 * Approved design: docs/projects/dau-50/spaces-design/.
 */

#route-spaces .pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
#route-spaces .p-good { background: var(--good-soft); color: var(--good); }
#route-spaces .p-acc  { background: var(--accent-soft); color: var(--accent-deep); }
#route-spaces .p-warn { background: var(--warn-soft); color: var(--warn); }
#route-spaces .p-mut  { background: var(--surface-3); color: var(--text-2); }
#route-spaces .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#route-spaces .csp-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
#route-spaces .csp-ico {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
  background: var(--accent-softer); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
#route-spaces .csp-lbl {
  display: block; margin: 0 0 8px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
#route-spaces .csp-meta { color: var(--text-3); font-size: 13px; }
#route-spaces .csp-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
#route-spaces .csp-none { padding: 16px 22px; color: var(--text-3); font-size: 13.5px; line-height: 1.55; }

/* ── The list ─────────────────────────────────────────────────────── */
#route-spaces .csp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
#route-spaces .csp-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
#route-spaces .csp-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
#route-spaces .csp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
#route-spaces .csp-kind {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
#route-spaces .csp-card-name {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 19px; line-height: 1.25;
  margin: 4px 0 0; overflow-wrap: anywhere;
}
#route-spaces .csp-card-foot {
  border-top: 1px solid var(--border-soft); padding: 12px 20px; font-size: 13.5px;
  display: flex; justify-content: flex-end;
}
#route-spaces .csp-card-foot a { font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
#route-spaces .csp-card-new {
  border-style: dashed; background: var(--surface-2); align-items: center; justify-content: center;
  gap: 10px; min-height: 200px; cursor: pointer; color: var(--text-2); font: inherit;
}
#route-spaces .csp-new-label { font-weight: 600; }
#route-spaces .csp-empty {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 620px;
}
#route-spaces .csp-empty h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; margin: 0; }
#route-spaces .csp-empty p { margin: 0; color: var(--text-2); line-height: 1.55; }

/* ── New space ────────────────────────────────────────────────────── */
#route-spaces .csp-kinds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }
#route-spaces .csp-kind-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; text-align: left; display: flex; flex-direction: column; gap: 10px;
  font: inherit; color: var(--text); cursor: pointer; min-height: 44px;
}
#route-spaces .csp-kind-tile.on { border: 2px solid var(--accent); box-shadow: 0 6px 20px -8px var(--accent); }
#route-spaces .csp-kind-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 17px; }
#route-spaces .csp-kind-desc { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
#route-spaces .csp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#route-spaces .csp-new-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
#route-spaces .csp-field { display: block; min-width: 0; }
#route-spaces .csp-field input[type="text"],
#route-spaces .csp-field select,
#route-spaces .csp-field textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px;
}
#route-spaces .csp-field textarea { resize: vertical; line-height: 1.5; }
#route-spaces .csp-field input:focus,
#route-spaces .csp-field select:focus,
#route-spaces .csp-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }
#route-spaces .csp-new-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
#route-spaces .csp-field-inline { margin-right: auto; min-width: 180px; }
#route-spaces .csp-pad { padding: 0 20px 18px; justify-content: flex-start; }

/* ── One space ────────────────────────────────────────────────────── */
#route-spaces .csp-head-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
#route-spaces .csp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#route-spaces .csp-tile-small { font-size: 18px; }
#route-spaces .csp-steps { padding: 4px 20px; }
/* Robert and Anne, round 4: a plan from Maya waiting on Edit lessons. */
#route-spaces .csp-waiting { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 2px; padding: 12px 14px; border-radius: 10px; background: var(--accent-softer); color: var(--text-1, inherit); }
#route-spaces .csp-waiting-t { flex: 1 1 220px; font-size: 14px; line-height: 1.5; font-weight: 600; }
#route-spaces .csp-steps .cpg-item { align-items: center; }
#route-spaces .csp-check {
  width: 22px; height: 22px; flex: 0 0 22px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center;
}
#route-spaces .csp-check.done { background: var(--good); border-color: var(--good); color: var(--surface); }
#route-spaces .csp-done { color: var(--text-3); text-decoration: line-through; }
#route-spaces .card { margin-bottom: 16px; }
#route-spaces .csp-posts { padding: 4px 20px; }
#route-spaces .csp-post .cpg-item-body { min-width: 0; }
#route-spaces .csp-post-body { margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 13.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); }
/* F19: rendered posts carry their own paragraphs; pre-wrap would double them. */
#route-spaces .csp-post-body.csp-post-html { white-space: normal; }
/* N2: Read it all, Edit and Delete sit together, wrapping on a phone. */
#route-spaces .csp-post-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#route-spaces .csp-post-html > :first-child { margin-top: 0; }
#route-spaces .csp-post-html p, #route-spaces .csp-post-html ul, #route-spaces .csp-post-html ol { margin: 0 0 8px; }
#route-spaces .csp-post-html ul, #route-spaces .csp-post-html ol { padding-left: 20px; }
#route-spaces .csp-post-html a { color: var(--accent); }
/* F19: on a phone the post takes the full width and its buttons go under it
   (the buttons beside it squeezed the text into half the card). */
@media (max-width: 699px) {
  #route-spaces .csp-post { flex-wrap: wrap; }
  #route-spaces .csp-post .cpg-item-body { flex: 1 1 100%; }
}
/* N4 / N2 (round 4): the Game tab's list sits inside the card's padding like
   every other list here, and an open game says when its posts wait on the coach. */
#route-spaces .csp-games .cpg-item-body { min-width: 0; flex: 1 1 auto; }
#route-spaces .csp-game-posts:empty { display: none; }
#route-spaces div.csp-game-wait { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--text); font-size: 14px; line-height: 1.45; }
#route-spaces .csp-post.csp-game-wait { margin-top: 0; padding: 14px 0; background: none; border-radius: 0; }
#route-spaces .csp-game-wait > span { flex: 1 1 220px; }
@media (max-width: 699px) {
  #route-spaces .csp-games .csp-game { flex-wrap: wrap; row-gap: 10px; }
  #route-spaces .csp-games .csp-game .cpg-item-body { flex: 1 1 100%; }
}
/* N2 (Robert, round 4): another product that still sells this space. */
#route-spaces .csp-also { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
#route-spaces .csp-also-row { padding: 10px 0 0; align-items: center; flex-wrap: wrap; row-gap: 8px; }
#route-spaces .csp-also-row .cpg-item-body { flex: 1 1 220px; min-width: 0; }
#route-spaces .csp-also-row .cpg-item-title { overflow-wrap: anywhere; }
/* Round 4 D: on a phone the header's "Start a live call" goes under the title
   rather than squeezing a two-word name onto two lines. */
@media (max-width: 699px) {
  #route-spaces .cpg-page > .page-head { flex-wrap: wrap; row-gap: 12px; }
  #route-spaces .cpg-page > .page-head > div:first-child { flex: 1 1 100%; min-width: 0; }
}
/* F6: the currency sign inside the price box. */
#route-spaces .csp-money { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
#route-spaces .csp-money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }
#route-spaces .csp-money-sym { display: flex; align-items: center; padding: 0 10px; background: var(--surface-2); color: var(--text-2); font-weight: 600; border-right: 1px solid var(--border); }
#route-spaces .csp-field .csp-money input[type="text"] { border: 0; border-radius: 0; flex: 1; min-width: 0; box-shadow: none; }
#route-spaces .csp-mini-select {
  min-height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 13px; padding: 0 8px; max-width: 150px;
}
#route-spaces .csp-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
#route-spaces .csp-two .card { margin: 0; }
#route-spaces .csp-two .card + .card { margin-top: 0; }
#route-spaces .csp-toggle-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
#route-spaces .csp-switch { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
#route-spaces .csp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#route-spaces .csp-switch span:first-of-type {
  width: 40px; height: 24px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s;
}
#route-spaces .csp-switch span:first-of-type::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); transition: left .15s;
}
#route-spaces .csp-switch input:checked + span { background: var(--accent); }
#route-spaces .csp-switch input:checked + span::after { left: 19px; }
#route-spaces .csp-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-softer); }
#route-spaces .csp-danger .card-title { color: var(--danger); }
/* The working-group picker lives in a CBSheet panel (outside #route-spaces). */
.csp-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.csp-pick input { width: 20px; height: 20px; flex: 0 0 20px; }
.csp-pick .csp-meta { color: var(--text-3); font-size: 12.5px; }
/* R4-3: Add people, invite by email, and the check before sending (CBSheet panels). */
.csp-add-help { color: var(--text-3); font-size: 13px; line-height: 1.5; margin: 6px 0 4px; }
.csp-add-or { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 13px; font-weight: 600; color: var(--text-2); }
.csp-inv-group { margin: 0 0 16px; }
.csp-inv-group .csp-meta { color: var(--text-3); font-size: 13px; line-height: 1.5; margin: 2px 0 6px; }
.csp-inv-head { font-size: 14px; font-weight: 600; color: var(--text); }
.csp-inv-head .count { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.csp-inv-list { margin: 4px 0 0; padding: 0; list-style: none; }
.csp-inv-list li { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; overflow-wrap: anywhere; }
.csp-inv-mail { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; margin: 6px 0; background: var(--surface-2); }
.csp-inv-subj { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.csp-inv-body { font-size: 13.5px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
#route-spaces .csp-privacy { color: var(--text-3); font-size: 12.5px; border-top: 1px solid var(--border-soft); }

/* ── Access & selling (S5; spaces-design/project/SpaceAccess.dc.html) ── */
#route-spaces .csp-seg {
  display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; max-width: 100%;
}
#route-spaces .csp-seg button {
  border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500;
  min-height: 36px; padding: 0 12px; border-radius: 7px; cursor: pointer;
  flex: 1 1 auto; white-space: nowrap;
}
#route-spaces .csp-seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px var(--border-strong); }
#route-spaces .csp-seg button:disabled { cursor: default; }
#route-spaces .csp-seg button:disabled:not(.on) { color: var(--text-3); }
#route-spaces .csp-seg button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-softer); }
#route-spaces .csp-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#route-spaces .csp-grid2 > .csp-field-wide { grid-column: 1 / -1; }
#route-spaces .csp-pick-now { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
#route-spaces .csp-pick-now b { color: var(--text); font-weight: 600; }
/* R4-M14: while a new price is set, what people pay reads as a sentence, not a box. */
#route-spaces .csp-newprice-sum { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
#route-spaces .csp-newprice-sum .csp-lbl { display: block; margin-bottom: 2px; }
#route-spaces .csp-newprice-sum #csp-pricebox { color: var(--text); font-weight: 700; }
/* R4-M15: the price at rest, the same sentence style; its amount stands out, nothing looks typeable. */
#route-spaces .csp-newprice-sum b { color: var(--text); font-weight: 700; }
#route-spaces .csp-fieldbox {
  border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center; font-size: 14px; background: var(--surface); color: var(--text);
}
#route-spaces .csp-newprod {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px;
  border: 1px dashed var(--border-strong); border-radius: 14px;
}
/* N3: why "Make the product" did not make it, beside the button. Empty takes no room. */
#route-spaces .csp-np-err { margin: 0; font-size: 14px; line-height: 1.5; color: var(--danger); font-weight: 600; }
#route-spaces .csp-np-err:empty { display: none; }
#route-spaces .csp-lead { font-size: 13px; line-height: 1.55; padding: 0; }
#route-spaces .csp-note {
  font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 10px;
  background: var(--warn-soft); color: var(--warn);
}
#route-spaces .csp-funnels {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
}
#route-spaces .csp-frow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#route-spaces .csp-fico {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
  background: var(--accent-softer); color: var(--accent); display: flex; align-items: center; justify-content: center;
}
#route-spaces .csp-fbody { flex: 1 1 160px; min-width: 0; }
#route-spaces .csp-fbody .cpg-item-title { overflow-wrap: anywhere; }
#route-spaces .csp-factions { display: flex; gap: 8px; flex-wrap: wrap; }
#route-spaces .csp-factions .btn { min-height: 36px; }
#route-spaces .csp-card .csp-lead, #route-spaces .card > .csp-lead { padding: 14px 22px 0; }

@media (min-width: 700px) {
  #route-spaces .csp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #route-spaces .csp-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #route-spaces .csp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #route-spaces .csp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  #route-spaces .csp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #route-spaces .csp-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #route-spaces .csp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* A path of spaces, round 3: a number inside a check ("Came to 3 of its live
   sessions"), the business checks' sub-heading, and why a finish line cannot be met. */
.csp-pick input.csp-path-n { width: 64px; flex: 0 0 64px; height: 32px; margin: 0 4px; padding: 2px 6px; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
#route-spaces .csp-path-sub { margin-top: 14px; }
#route-spaces .csp-hint.csp-warn { color: var(--warn); font-weight: 500; }

/* Two buttons in one card head (Working groups: make groups for everyone, or one). */
#route-spaces .csp-head-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Round 3: "Connect Stripe first", said before the product form. */
#route-spaces .csp-stripe-first { border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: var(--surface-2); }
/* Spaces round 4 (R4-1): the plain step before Stripe, and what came back. */
#route-spaces .csp-sf-p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
#route-spaces .csp-sf-p b { color: var(--text); }
#route-spaces .csp-sf-h { margin: 14px 0 4px; font-size: 14px; font-weight: 600; color: var(--text); }
#route-spaces .csp-sf-asks { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
#route-spaces .csp-sf-asks li { margin: 6px 0; }
#route-spaces .csp-sf-asks b { color: var(--text); font-weight: 600; }
#route-spaces .csp-sf-state { margin: 12px 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.55;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); }
#route-spaces .csp-sf-ok { background: var(--good-soft, #ecfdf5); border-color: transparent; }
#route-spaces .csp-sf-warn { background: var(--warn-soft); border-color: transparent; }
#route-spaces .csp-sf-due { margin: 6px 0; padding-left: 20px; }
/* R4-2: what a sale means, beside the price. */
#route-spaces .csp-moneybox { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--surface-2); }
#route-spaces .csp-mb-h { margin: 10px 0 2px; font-size: 13px; font-weight: 600; color: var(--text); }
#route-spaces .csp-mb-h:first-child { margin-top: 0; }
#route-spaces .csp-mb-big { font-size: 15px; line-height: 1.45; color: var(--text); }
#route-spaces .csp-mb-row { font-size: 13px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
#route-spaces .csp-mb-soft { margin-top: 2px; }
.csp-pick.csp-pick-all { font-weight: 600; }

/* "Getting started for new members" on a space's Overview (space-getting-started.js,
   design D2: docs/projects/dau-50/space-onboarding-design.html). Phone first: every
   control is a 44px button and nothing hides behind hover. */
#route-spaces .csg-card { padding: 18px 20px; display: grid; gap: 14px; }
#route-spaces .csg-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
#route-spaces .csg-head .card-title { margin: 0; }
#route-spaces .csg-lead { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
#route-spaces .csg-maya { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--accent-softer); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--text); }
#route-spaces .csg-maya span { flex: 1 1 260px; min-width: 0; }
#route-spaces .csg-preview { display: grid; gap: 6px; }
#route-spaces .csg-prow { padding: 8px 12px; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-2); font-size: 14px; }
#route-spaces .csg-steps { display: grid; }
.csg-step, .csg-stuck { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.csg-stuck { grid-template-columns: minmax(0, 1fr) auto; }
.csg-step:first-child, .csg-stuck:first-child { border-top: 0; }
.csg-grip { color: var(--text-3); font-size: 14px; line-height: 24px; cursor: grab; user-select: none; }
.csg-body { min-width: 0; }
.csg-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.csg-how { margin-top: 2px; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.csg-how.csg-warn { color: var(--warn); }
.csg-btn { min-height: 44px; }
#route-spaces .csg-actions, .csg-sheet-row { display: flex; flex-wrap: wrap; gap: 8px; }
.csg-sheet-row { margin-top: 16px; }
@media (max-width: 560px) {
  #route-spaces .csg-card { padding: 16px; }
  #route-spaces .csg-actions .csg-btn { flex: 1 1 100%; }
}

/* Round 4 (F20): the Members list on a phone. A member's row put the name beside
   the cohort picker, Move and Remove, so a long name or an email (an imported
   member with no name) was squeezed to one letter a line. On a phone the name
   takes the whole first line and the controls wrap under it. */
@media (max-width: 640px) {
  #route-spaces #csp-members .cpg-item { flex-wrap: wrap; row-gap: 8px; }
  #route-spaces #csp-members .cpg-item-body { flex: 1 1 100%; min-width: 0; }
  #route-spaces #csp-members .cpg-item-title,
  #route-spaces #csp-members .cpg-item-meta { overflow-wrap: anywhere; }
}

/* R4-11 / R4-12: planned lessons and "Write all lessons" on the Content tab. */
#route-spaces .csp-planned .cpg-item-title { color: var(--text-2, #4d5168); }
#route-spaces .csp-writeall { margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--accent-softer); display: flex; flex-direction: column; gap: 10px; }
#route-spaces .csp-writeall-t { font-size: 14px; line-height: 1.5; color: var(--text-1, #15172b); }
#route-spaces .csp-writeall .csp-new-actions { flex-wrap: wrap; gap: 8px; }
#route-spaces .csp-writeall-bar { height: 8px; border-radius: 999px; background: var(--border, #e4dcff); overflow: hidden; }
#route-spaces .csp-writeall-bar span { display: block; height: 100%; background: var(--accent, #6a4cf1); border-radius: 999px; transition: width .4s ease; }
#route-spaces .card-title .count { white-space: nowrap; }
/* NB2: the note after invitations go, kept until the coach moves on. */
.csp-invdone { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; padding: 12px 14px; border-radius: 10px; background: var(--good-soft, #ecfdf5); color: var(--good, #047857); font-size: 14px; line-height: 1.5; }
.csp-invdone b { font-weight: 600; }
.csp-invdone-bad { background: var(--warn-soft, #fffbeb); color: var(--warn, #92400e); }
/* Tyre-kicker round 1 (builder S). TK-17: the setup list leads the Overview; its
   first open step is the one next step, and the cards after it are quieter. */
#route-spaces .csp-setup .csp-next { background: var(--accent-soft, #f5f3ff); border-radius: 10px; margin: 4px -12px; padding-left: 12px; padding-right: 12px; }
/* The Spaces list: each space's next step, read from the list (spaces home, G1). */
#route-spaces .csp-card-next { font-size: 14px; color: var(--text); line-height: 1.45; }
#route-spaces .csp-card-next .csp-next-tag { display: inline; margin-right: 4px; }
#route-spaces .csp-home-tabs { margin-bottom: 20px; }
#route-spaces .csp-next-tag { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
#route-spaces .csp-ov-rest .btn-primary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
#route-spaces .csp-ov-rest .btn-primary:hover { background: var(--surface-2); }
/* TK-5: what a quick change saved, with Undo beside it. */
#route-spaces .csp-acc-said { margin-top: 8px; font-size: 14px; color: var(--text-2); }
#route-spaces .csp-linkbtn { background: none; border: none; padding: 0 2px; min-height: 0; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* TK-6: no course yet, said instead of an empty picker. */
#route-spaces .csp-nocourse { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.5; color: var(--text-2); }
#route-spaces .csp-nocourse b { color: var(--text); }
/* TK-10: the price before Stripe, and the one step left. */
#route-spaces .csp-draftform, #route-spaces .csp-draftprice { margin-bottom: 14px; }
#route-spaces .csp-draft-next { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
#route-spaces .csp-draft-next b { color: var(--text); }
/* Archived spaces at the foot of the list, each with Restore (R9-UI, 3 Oct). */
#route-spaces .csp-arch { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
#route-spaces .csp-arch-h { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--text); }
#route-spaces .csp-arch-sub { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
#route-spaces .csp-arch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#route-spaces .csp-arch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
#route-spaces .csp-arch-body { min-width: 0; flex: 1 1 180px; }
#route-spaces .csp-arch-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
#route-spaces .csp-arch-meta { margin-top: 2px; font-size: 13px; color: var(--text-2); }
#route-spaces .csp-arch-row .csp-btn { min-height: 44px; }

/* Cover picture (design polish, 3 Oct 2026): the space's card picture on the member Spaces page. */
.csp-cover-prev { aspect-ratio: 16 / 7; max-width: 520px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; background: linear-gradient(135deg, var(--accent-softer), var(--surface-2)); color: var(--text-2); font-size: 14px; }
.csp-cover-prev.csp-cover-has { padding: 0; background: var(--surface-2); }
.csp-cover-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
#route-spaces .csp-card-cover { aspect-ratio: 16 / 6; overflow: hidden; background: var(--surface-2); }
#route-spaces .csp-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Review 3, UX3-18: with no picture, the preview shows the host's photo, as members see it. */
.csp-cover-prev:not(.csp-cover-has) { flex-direction: column; gap: 10px; }
.csp-cover-prev img.csp-cover-host { width: 72px; height: 72px; border-radius: 50%; flex: none; border: 3px solid var(--surface); }