/* Manager · Team workload mood (PREVIEW Oct 28 2026). Cabarrus, Pineville, Winston-Salem Manager pages.
   Self-contained (mm-*), painted only with the Stoplight tokens (--sl-*) so Maroon, Enterprise and Classic each
   look native; Sky falls back to the Classic tokens. Colors never carry meaning alone: every bracket shows its label. */
.sl.mm-card { --mm-line: #8A1538; --mm-burnout: #6B0F24; --mm-heavy: #C2343F; --mm-stretched: #DD8A2E; --mm-okay: #C9A23A; --mm-good: #1F8A4C; }
html[data-theme="enterprise"] .sl.mm-card { --mm-line: #2E8B57; --mm-burnout: #7A1D2A; --mm-heavy: #C8443E; --mm-stretched: #D9822B; --mm-okay: #C99A06; --mm-good: #1F7A4C; }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .sl.mm-card { --mm-line: #f5d76e; --mm-burnout: #F43F5E; --mm-heavy: #FB7185; --mm-stretched: #FB923C; --mm-okay: #FACC15; --mm-good: #34D399; }
html[data-theme="maroon"] .sl.mm-card { --mm-line: #8A1538; }
.mm-card [data-mood="burnout"] { --mm-c: var(--mm-burnout); }
.mm-card [data-mood="heavy"] { --mm-c: var(--mm-heavy); }
.mm-card [data-mood="stretched"] { --mm-c: var(--mm-stretched); }
.mm-card [data-mood="okay"] { --mm-c: var(--mm-okay); }
.mm-card [data-mood="good"] { --mm-c: var(--mm-good); }

.mm-card[hidden] { display: none !important; }
.mm-card { font-family: var(--sl-sans); color: var(--sl-ink); }
.mm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.sl .mm-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 11px/1 var(--sl-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sl-gold); }
.mm-faces { display: inline-flex; gap: 4px; }
.mm-faces i { width: 8px; height: 8px; border-radius: 50%; display: block; background: var(--mm-good); }
.mm-faces i:nth-child(2) { background: var(--mm-okay); }
.mm-faces i:nth-child(3) { background: var(--mm-heavy); }
html body .sl .mm-h2 { margin: 0 0 4px; font: 600 22px/1.2 var(--sl-num); letter-spacing: .005em; color: var(--sl-ink); }  /* same as .cmx-h2 */
.mm-sub { margin: 6px 0 0; font: 400 14.5px/1.5 var(--sl-sans); color: var(--sl-muted); }
.mm-err { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--sl-r-sm, 10px); background: var(--sl-y-bg); color: var(--sl-y-ink); border: 1px solid var(--sl-y-line); font: 600 14px/1.4 var(--sl-sans); }
.mm-empty { padding: 28px 18px; text-align: center; border: 1px dashed var(--sl-line); border-radius: var(--sl-r-sm, 12px); color: var(--sl-muted); font: 500 15px/1.5 var(--sl-sans); background: var(--sl-well); }

/* range switch */
.mm-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--sl-well); border: 1px solid var(--sl-line); }
html body .sl button.mm-seg-btn { appearance: none; border: 0; cursor: pointer; height: 34px; padding: 0 14px; border-radius: 999px; background: transparent;
  font: 700 13px/1 var(--sl-sans); color: var(--sl-muted); white-space: nowrap; transition: background .2s var(--sl-ease), color .2s; }
html body .sl button.mm-seg-btn:hover { color: var(--sl-ink); }
html body .sl button.mm-seg-btn.is-on { background: var(--sl-primary); color: var(--sl-primary-ink); box-shadow: var(--sl-primary-shadow); }
html body .sl button.mm-seg-btn:focus-visible { outline: none; box-shadow: var(--sl-focus); }

/* tiles */
.mm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.mm-tile { padding: 16px 18px; border-radius: var(--sl-r-sm, 14px); background: var(--sl-well); border: 1px solid var(--sl-line); min-width: 0; }
.mm-k { font: 700 11px/1.2 var(--sl-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sl-muted); }
.mm-big { margin-top: 8px; font: 700 32px/1 var(--sl-num); color: var(--sl-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mm-big span { margin-left: 5px; font: 600 14px/1 var(--sl-sans); color: var(--sl-muted); letter-spacing: 0; }
.mm-tf { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font: 500 13px/1.35 var(--sl-sans); color: var(--sl-muted); }
.mm-of { font: 500 13px/1.3 var(--sl-sans); color: var(--sl-muted); }
.mm-delta { font: 700 13px/1 var(--sl-num); color: var(--sl-ink); }
.mm-delta.is-up { color: var(--sl-g-ink); }
.mm-delta.is-down { color: var(--sl-r-ink); }

/* bracket pill: colored dot + label (ink text, so contrast never depends on the bracket color) */
.mm-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; white-space: nowrap;
  font: 700 12.5px/1 var(--sl-sans); color: var(--sl-ink);
  background: var(--sl-card); background: color-mix(in srgb, var(--mm-c, var(--sl-muted)) 14%, var(--sl-card));
  border: 1px solid color-mix(in srgb, var(--mm-c, var(--sl-muted)) 38%, transparent); }
.mm-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mm-c, var(--sl-muted)); flex: none; }

/* blocks + charts */
.mm-block { padding: 18px 18px 14px; border-radius: var(--sl-r-sm, 14px); background: var(--sl-card); border: 1px solid var(--sl-line); margin-bottom: 18px; min-width: 0; }
html body .sl .mm-h3 { margin: 0 0 12px; font: 700 15px/1.2 var(--sl-sans); color: var(--sl-ink); letter-spacing: .01em; }
.mm-note { margin: 10px 0 0; font: 400 13px/1.45 var(--sl-sans); color: var(--sl-muted); }
.mm-note-top { margin: -6px 0 12px; }
.mm-chart { width: 100%; min-height: 180px; }
.mm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mm-band { fill: var(--mm-good); opacity: .09; }
.mm-band-t { font: 700 10.5px/1 var(--sl-sans); fill: var(--mm-good); letter-spacing: .04em; opacity: .9; }
.mm-grid { stroke: var(--sl-line); stroke-width: 1; stroke-dasharray: 3 4; }
.mm-grid-0 { stroke-dasharray: none; }
.mm-ax { font: 500 11px/1 var(--sl-sans); fill: var(--sl-muted); font-variant-numeric: tabular-nums; }
.mm-ax-l { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 9.5px; }
.mm-line { fill: none; stroke: var(--mm-line); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.mm-line-faint { fill: none; stroke: var(--mm-line); stroke-width: 1.4; stroke-dasharray: 2 5; opacity: .45; stroke-linecap: round; }
.mm-area { fill: var(--mm-line); opacity: .07; }
.mm-dot { fill: var(--mm-c, var(--mm-line)); stroke: var(--sl-card); stroke-width: 2; }
.mm-val { font: 700 10.5px/1 var(--sl-num); fill: var(--sl-ink); font-variant-numeric: tabular-nums; }
.mm-bar { fill: var(--mm-line); opacity: .32; }

/* distribution */
.mm-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; }
.mm-two > .mm-block { margin-bottom: 18px; }
.mm-stack { display: flex; height: 30px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--sl-well); margin-bottom: 14px; }
.mm-stack span { display: flex; align-items: center; justify-content: center; min-width: 22px; background: var(--mm-c); }
.mm-stack b { font: 700 12px/1 var(--sl-num); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .mm-stack b { color: #160828; text-shadow: none; }
.mm-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-legend li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--sl-line); font: 600 14px/1.2 var(--sl-sans); }
.mm-legend li:last-child { border-bottom: 0; }
.mm-legend li i { width: 10px; height: 10px; border-radius: 3px; background: var(--mm-c); flex: none; }
.mm-legend li .mm-lg-l { flex: 1; min-width: 0; }
.mm-legend li small { margin-left: 4px; font: 500 12px/1 var(--sl-sans); color: var(--sl-muted); }
.mm-legend li b { font: 700 16px/1 var(--sl-num); font-variant-numeric: tabular-nums; }
.mm-legend li.is-zero { color: var(--sl-muted); }
.mm-legend li.is-zero b { color: var(--sl-soft, var(--sl-muted)); font-weight: 600; }

/* people list */
.mm-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html body .sl button.mm-person { appearance: none; cursor: pointer; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 14px; align-items: center; gap: 14px;
  padding: 10px 12px 10px 14px; border-radius: var(--sl-r-sm, 12px); text-align: left; color: var(--sl-ink);
  background: var(--sl-well); border: 1px solid var(--sl-line); transition: border-color .2s, transform .2s var(--sl-ease), box-shadow .2s; }
html body .sl button.mm-person:hover { border-color: var(--sl-line-2, var(--sl-gold)); transform: translateY(-1px); }
html body .sl button.mm-person.is-on { border-color: var(--sl-gold); box-shadow: 0 0 0 1px var(--sl-gold) inset; background: var(--sl-card); }
html body .sl button.mm-person:focus-visible { outline: none; box-shadow: var(--sl-focus); }
.mm-pn { min-width: 0; font: 700 15px/1.2 var(--sl-sans); overflow-wrap: anywhere; }
.mm-pn small { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--sl-sans); color: var(--sl-muted); }
.mm-pv { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 128px; }
.mm-pv b { font: 700 19px/1 var(--sl-num); font-variant-numeric: tabular-nums; }
.mm-ar { font: 400 22px/1 var(--sl-sans); color: var(--sl-muted); }
html body .sl button.mm-person.is-on .mm-ar { color: var(--sl-gold); transform: rotate(90deg); }
.mm-spark { display: block; }
.mm-spark-g { stroke: var(--mm-good); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.mm-spark-l { fill: none; stroke: var(--mm-line); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* interpreter detail */
.mm-detail { margin: 4px 0 18px; padding: 22px 20px 6px; border-radius: var(--sl-r, 18px); background: var(--sl-well);
  border: 1px solid var(--sl-line); border-top: 3px solid var(--sl-gold); scroll-margin-top: 16px; }
.mm-detail .mm-tile { background: var(--sl-card); }
.mm-dh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
html body .sl .mm-dn { margin: 0; font: 600 22px/1.2 var(--sl-num); color: var(--sl-ink); }
html body .sl .mm-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  font: 700 13.5px/1 var(--sl-sans); color: var(--sl-ink); background: var(--sl-ghost, var(--sl-card)); border: 1px solid var(--sl-ghost-line, var(--sl-line)); }
html body .sl .mm-btn:hover { filter: brightness(1.04); }
html body .sl .mm-btn:focus-visible { outline: none; box-shadow: var(--sl-focus); }
.mm-scroll { max-height: 460px; overflow: auto; margin: 0 -6px; padding: 0 6px; }
html body .sl table.mm-table { width: 100%; border-collapse: collapse; font: 500 14px/1.3 var(--sl-sans); }
html body .sl table.mm-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 8px; background: var(--sl-card) !important; color: var(--sl-muted) !important;
  font: 700 10.5px/1 var(--sl-sans); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--sl-line) !important; }
html body .sl table.mm-table tbody th, html body .sl table.mm-table td { padding: 9px 8px; border-bottom: 1px solid var(--sl-line) !important; text-align: left; vertical-align: middle; background: transparent !important; color: var(--sl-ink) !important; }
html body .sl table.mm-table tbody th { font-weight: 700; white-space: nowrap; }
html body .sl table.mm-table tr:last-child > * { border-bottom: 0 !important; }
.mm-tt { color: var(--sl-muted) !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-sc { white-space: nowrap; }
.mm-sc b { font: 700 16px/1 var(--sl-num); font-variant-numeric: tabular-nums; }
.mm-sc span { color: var(--sl-muted); font-size: 12px; }
.mm-by { display: inline-block; margin-left: 8px; font: 600 11.5px/1 var(--sl-sans); color: var(--sl-muted); white-space: nowrap; }
.mm-foot { margin: 4px 0 0; font: 400 12.5px/1.5 var(--sl-sans); color: var(--sl-muted); }

@media (max-width: 1100px) { .mm-two { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 860px) { .mm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .mm-head { flex-direction: column; margin-bottom: 16px; }
  html body .sl .mm-h2 { font-size: 23px; }
  .mm-tiles { gap: 8px; margin-bottom: 14px; }
  .mm-tile { padding: 12px 12px; }
  .mm-big { font-size: 26px; }
  .mm-tf { font-size: 12px; }
  .mm-block { padding: 14px 12px 12px; margin-bottom: 14px; }
  .mm-detail { padding: 18px 12px 4px; margin-left: -4px; margin-right: -4px; }
  html body .sl button.mm-person { grid-template-columns: minmax(0, 1fr) auto 12px; gap: 10px; padding: 10px; }
  html body .sl button.mm-person .mm-spark { display: none; }
  .mm-pv { min-width: 0; flex-direction: column; align-items: flex-end; gap: 5px; }
  html body .sl table.mm-table thead th, html body .sl table.mm-table tbody th, html body .sl table.mm-table td { padding-left: 5px; padding-right: 5px; }
  html body .sl table.mm-table { font-size: 13px; }
  .mm-by { display: block; margin: 4px 0 0; }
  .mm-pill { height: 22px; font-size: 12px; padding: 0 8px 0 7px; }
  .mm-sub br { display: none; }
}

/* headings follow each theme's manager header type (see lais-mgr-consistency.css) */
html[data-theme="maroon"] body .sl .mm-h2, html[data-theme="maroon"] body .sl .mm-dn { font: 600 24px/1.2 "Playfair Display", Georgia, serif; letter-spacing: -.005em; }
html[data-theme="maroon"] body .sl .mm-h3 { font: 600 16px/1.2 "Playfair Display", Georgia, serif; }
html[data-theme="enterprise"] body .sl .mm-h2, html[data-theme="enterprise"] body .sl .mm-dn { font: 700 22px/1.2 var(--sl-sans); letter-spacing: -.005em; }
@media (max-width: 600px) {
  .mm-scroll { max-height: none; overflow: visible; }
  html body .sl .mm-h2, html body .sl .mm-dn { font-size: 21px !important; }
}

/* Nov 2 2026: each score's own meaning + "How to read the scores" legend (one question, same five brackets) */
.mm-mean { display: block; margin-top: 4px; font: 400 12.5px/1.35 var(--sl-sans); color: var(--sl-muted); white-space: normal; }
.mm-mean b { font-weight: 700; color: var(--sl-ink); }
.mm-key summary { cursor: pointer; list-style-position: inside; }
.mm-key summary .mm-h3 { display: inline; }
.mm-key summary:focus-visible { outline: none; box-shadow: var(--sl-focus); border-radius: 6px; }
.mm-key[open] summary { margin-bottom: 12px; }
.mm-keygrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mm-keyg { padding: 10px 12px; border-radius: var(--sl-r-sm, 10px); background: var(--sl-well); border: 1px solid var(--sl-line); border-top: 4px solid var(--mm-c); min-width: 0; }
.mm-keyh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font: 700 13.5px/1.25 var(--sl-sans); color: var(--sl-ink); margin-bottom: 6px; }
.mm-keyh i { width: 9px; height: 9px; border-radius: 50%; background: var(--mm-c); flex: none; align-self: center; }
.mm-keyh small { font: 500 12px/1 var(--sl-sans); color: var(--sl-muted); }
.mm-keyg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mm-keyg li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; font: 400 12.5px/1.35 var(--sl-sans); color: var(--sl-muted); }
.mm-keyg li b { font: 700 13px/1.35 var(--sl-num); color: var(--sl-ink); text-align: right; font-variant-numeric: tabular-nums; }
.mm-keyg li em { font-style: normal; font-weight: 700; color: var(--sl-ink); }
@media (max-width: 1100px) { .mm-keygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mm-keygrid { grid-template-columns: 1fr; } }
/* Phone: the "Saved" time column gives way so the score + its meaning fit without sideways scrolling. */
@media (max-width: 600px) {
  html body .sl table.mm-table thead th:nth-child(2), html body .sl table.mm-table td.mm-tt { display: none; }
  html body .sl table.mm-table td .mm-pill { max-width: 100%; }
}