/* Spaces build 3: a space's Analytics tab (js/spaces/home-analytics.js, item H-81). Every class is spn-.
 *
 * P12 (28 Oct 2026): the cards, the numbers (fh-nums), the rows (fh-todo), a detail's head (ch-row), the ladder
 * (ch-ladder), the date switch (fh-seg) and the buttons are the course home's kit (css/funnel-home.css,
 * css/course-home.css). Only what the kit has no piece for is drawn here, on its own tokens: an open number, the
 * up and down words, faces, and the detail's frame. */

#route-spaces .spn { display: grid; gap: 18px; min-width: 0; }
#route-spaces .spn .spn-tile { cursor: pointer; }
#route-spaces .spn .spn-tile.spn-on { background: var(--fh-accent-soft); }
#route-spaces .spn .spn-tile.spn-off { cursor: default; }
#route-spaces .spn .spn-d.spn-up { color: var(--fh-good); }
#route-spaces .spn .spn-d.spn-down { color: var(--fh-warn); }

/* A number's detail, opened in place under the numbers */
#route-spaces .spn .spn-det { border-top: 1px solid var(--fh-border); background: var(--fh-surface); }
#route-spaces .spn .spn-deth { border-top: 0; background: var(--fh-surface-2); }
#route-spaces .spn .spn-det > .fh-card-b,
#route-spaces .spn .spn-det > .fh-todo,
#route-spaces .spn .spn-det > .ch-ladder { border-top: 1px solid var(--fh-border); }
#route-spaces .spn .spn-sum + .fh-todo { border-top: 1px solid var(--fh-border); }
#route-spaces .spn .fh-todo-row.spn-amt .fh-todo-acts b { font-variant-numeric: tabular-nums; }
#route-spaces .spn .spn-bars .ch-lad { grid-template-columns: 150px minmax(0, 1fr) 44px 64px; }

/* Faces */
#route-spaces .spn .spn-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center;
  background: var(--fh-accent-soft); color: var(--fh-accent-deep); }
#route-spaces .spn .spn-av svg { width: 16px; height: 16px; }
#route-spaces .spn .spn-facerow { display: inline-flex; flex: none; min-width: 30px; }
#route-spaces .spn .spn-facerow .spn-av { width: 26px; height: 26px; border: 2px solid var(--fh-surface); margin-left: -7px; }
#route-spaces .spn .spn-facerow .spn-av:first-child { margin-left: 0; }
#route-spaces .spn .spn-faces { display: flex; flex-wrap: wrap; gap: 8px 14px; }
#route-spaces .spn .spn-fn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#route-spaces .spn .spn-fn .spn-av { width: 26px; height: 26px; }

@media (max-width: 560px) {
  #route-spaces .spn .spn-bars .ch-lad { grid-template-columns: 92px minmax(0, 1fr) 34px 60px; }
  #route-spaces .spn .fh-card-h .spn-range { flex-wrap: wrap; }
}