/* Spaces build 3 (24 Oct 2026): the home-today lane's styles, js/spaces/home-today.js (the Overview cards, the Drafts
 * sheet, Not in yet) and js/spaces/home-emails.js (the Emails tab). Every class is namespaced sht-.
 *
 * P12 (28 Oct 2026): Overview is the course's control centre (css/control-centre.css: cin-card, cin-need, cin-btn,
 * cin-lede) and every other card is the course home's kit (css/funnel-home.css, css/course-home.css: fh-card, fh-nums,
 * ch-ladder, ch-row, ch-switch, fh-seg, fh-pill, fh-btn). What stays here is only what neither kit has a piece for,
 * on the kit's tokens: the strip's layout, faces, the answers chart, the email and text previews, and the two notes. */

#route-spaces .sht-i { width: 16px; height: 16px; flex: none; }
#route-spaces .sht-lede { display: grid; gap: 10px; }

/* The strip and the goal (the page's lede, as the control centre leads with its week) */
#route-spaces .sht-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#route-spaces .sht-strip .sht-asmember { margin-left: auto; }
#route-spaces .sht-goal { display: grid; gap: 2px; }
#route-spaces .sht-goal p { margin: 0; }

/* Needs you: a row's faces and count, its buttons, and what was put off */
#route-spaces .sht-fl { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
#route-spaces .sht-num { font-size: 12.5px; color: var(--fh-text-2); }
#route-spaces .sht-ta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
@media (max-width: 620px) {
  #route-spaces .sht-ta { justify-content: flex-start; }
  #route-spaces .sht-strip .sht-asmember { margin-left: 0; }
}

/* Faces: a photo, else the person pictogram (never letters) */
#route-spaces .sht-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex: none; }
#route-spaces .sht-noface { background: var(--fh-surface-3); color: var(--fh-text-3); }
#route-spaces .sht-noface svg, #route-spaces svg.sht-noface { width: 20px; height: 20px; padding: 0; }
#route-spaces svg.sht-av.sht-noface { padding: 6px; box-sizing: border-box; }
#route-spaces .sht-avs { display: inline-flex; }
#route-spaces .sht-avs .sht-av { width: 26px; height: 26px; border: 2px solid var(--fh-surface); margin-left: -7px; }
#route-spaces .sht-avs .sht-av:first-child { margin-left: 0; }
#route-spaces .sht-avs .sht-noface svg { width: 14px; height: 14px; }

/* Where members are: the course home's ladder beside the answers chart */
#route-spaces .sht-res { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
#route-spaces .sht-res.one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) { #route-spaces .sht-res { grid-template-columns: minmax(0, 1fr); } }
#route-spaces .sht-rescol { display: grid; gap: 10px; align-content: start; min-width: 0; }
#route-spaces .sht-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#route-spaces .sht-chart { display: grid; gap: 8px; height: 110px; align-items: end; border-bottom: 1px solid var(--fh-border); padding-top: 18px; }
#route-spaces .sht-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
#route-spaces .sht-col i { display: block; width: min(100%, 38px); border-radius: 4px 4px 0 0; background: var(--fh-accent); min-height: 3px; }
#route-spaces .sht-col i.now { background: var(--fh-accent-soft); box-shadow: inset 0 0 0 1.5px var(--fh-accent); }
#route-spaces .sht-cv { font-size: 11.5px; font-weight: 600; color: var(--fh-text-2); white-space: nowrap; }
#route-spaces .sht-axis { display: grid; gap: 8px; font-size: 11.5px; color: var(--fh-text-3); text-align: center; }

/* The Drafts sheet: a draft's fields */
#route-spaces .sht-field { width: 100%; box-sizing: border-box; margin-top: 6px; }
#route-spaces .sht-draft.sent .cin-need-t { color: var(--fh-text-2); }

/* Emails: the mail and text previews, the Already said box, a warning */
#route-spaces .sht-mail { display: grid; gap: 8px; background: var(--fh-surface-2); border: 1px solid var(--fh-border); border-radius: 12px; padding: 14px 16px; max-width: 520px; min-width: 0; overflow-wrap: anywhere; }
/* A row of choices wraps inside its card on a phone, as the course home's long choice row does (.ch-stu-bar .fh-seg). */
#route-spaces .sht-seg { flex-wrap: wrap; max-width: 100%; }
#route-spaces .sht-mail p { margin: 0; }
#route-spaces .sht-mfrom { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--fh-border); }
#route-spaces .sht-mfrom > span { display: grid; min-width: 0; }
#route-spaces .sht-mfrom > .sht-av { width: 32px; height: 32px; }
#route-spaces .sht-mbtn { justify-self: start; background: var(--fh-accent); color: #fff; font-weight: 600; border-radius: 9px; padding: 8px 14px; }
#route-spaces .sht-link { color: var(--fh-accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#route-spaces .sht-callink { justify-self: start; }
#route-spaces .sht-sms { display: grid; gap: 6px; max-width: 360px; }
#route-spaces .sht-bubble { background: var(--fh-surface-3); border-radius: 18px 18px 18px 6px; padding: 10px 14px; }
#route-spaces .sht-buddy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { #route-spaces .sht-buddy { grid-template-columns: minmax(0, 1fr); } }
#route-spaces .sht-dup { display: grid; gap: 6px; background: var(--fh-accent-soft); border-radius: 10px; padding: 10px 12px; }
#route-spaces .sht-dup b { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; }
#route-spaces .sht-warn { display: flex; gap: 8px; align-items: flex-start; }   /* the look is the course home's ch-stale-checkout */
#route-spaces .sht-warn svg { width: 16px; height: 16px; color: var(--fh-warn); flex: none; margin-top: 2px; }
#route-spaces .sht-speak:empty { display: none; }