/* UX-B · health up to the divisions (js/pm-health.js, js/pm-brief.js): On track / At risk /
   Off track / No recent activity, always a word with its dot. No new colours: green is --ok,
   amber --amber, red --danger, grey --muted. Light and dark follow the tokens. */

/* the tag: a dot and the word, the reason after it when asked */
.pm-htag { --hc: var(--ok); display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.pm-htag.amber { --hc: var(--amber); }
.pm-htag.red { --hc: var(--danger); }
.pm-htag.grey { --hc: var(--muted); }
.pm-htag .pm-hdot { margin: 0; background: var(--hc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc) 22%, transparent); }
.pm-htag b { flex: none; font-weight: 600; color: var(--hc); }
.pm-htag.green b, .pm-htag.grey b { color: var(--text); }
.pm-htag-why { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-hdot.grey { background: var(--muted); box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 22%, transparent); }

/* Map nodes: the tag sits after the name; on a phone it drops under it when there's no room */
.pmv-map-node .pm-htag { flex: 0 1 auto; margin-left: 10px; font-size: 12px; }
.pmv-map-node .pm-htag-why { max-width: 260px; }
@media (max-width: 600px) {
  .pmv-map-node:has(.pm-htag) { flex-wrap: wrap; row-gap: 0; }
  .pmv-map-node .pm-htag-why { display: none; } /* the word on a phone; the reasons are on the venture page */
}

/* venture page header: grey is a state too */
.pmv-vt-health.pm-bh.green { --sc: var(--ok); }
.pmv-vt-health.pm-bh.grey { --sc: var(--muted); }

/* ---- Home: the division strip ---- */
#hs-strip { display: grid; gap: 10px; margin: 18px 0 4px; max-width: 760px; }
.hs-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; margin: 0 0 0 4px; }
.hs-h { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hs-roll { margin: 0; font-size: 14px; line-height: 20px; color: var(--text); }
.hs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hs-tile { position: relative; display: grid; align-content: start; gap: 3px; min-width: 0; min-height: 44px; padding: 12px 12px 12px 15px; border: 0; border-radius: var(--r-row, 16px); background: var(--glass); box-shadow: var(--elevation); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform 120ms ease-out; }
.hs-tile::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--muted)); opacity: .85; } /* the division's own colour, as on the Map */
.hs-tile:active { transform: scale(0.98); }
.hs-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hs-name { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hs-why { font-size: 12px; line-height: 16px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-tile.red .hs-why { color: var(--danger); }
#hs-strip.brief-in { animation: em-rise .5s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { #hs-strip.brief-in, .hs-tile { animation: none; transition: none; } }

/* tablets: as many as fit */
@media (min-width: 600px) { .hs-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* wide screens: the strip takes the left column, one row, between the greeting and the tiles */
@media (min-width: 1000px) {
  #home-page .main.home.brief-on:has(#hs-strip) { grid-template-areas: "head brief" "talk brief" "strip brief" "grid brief"; grid-template-rows: auto auto auto 1fr; }
  #home-page .main.home.brief-on:has(#hs-strip) .home-talk { grid-area: talk; }
  #hs-strip { grid-area: strip; max-width: none; margin: 4px 0 28px; }
  .hs-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .hs-tile { min-height: 96px; }
}
/* the word never clips: in a narrow tile it wraps under its dot's line */
.hs-tile .pm-htag { align-items: flex-start; }
.hs-tile .pm-htag .pm-hdot { margin-top: 5px; }
.hs-tile .pm-htag b { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 18px; }

/* Positive-only (plan E): "Needs you" is a warm amber-orange, never alarm red. */
:root { --needs-you: color-mix(in srgb, var(--amber) 65%, var(--danger)); }
.pm-htag.red, .pm-hdot.red { --hc: var(--needs-you); }
.pm-hdot.red { background: var(--needs-you); }
.hs-tile.red .hs-why { color: var(--needs-you); }