/* The People map: a matrix of roles (grouped by home department) × the department that owns the
   process, with its controls and key. The heat fills are in base.css; the scroll box in layout.css. */
.msec-matrix{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.c-matrix{overflow:hidden !important}
.c-matrix > h3:has(+ .mx-ctrls){padding-right:calc(27.5rem * var(--dz))}
.mx-ctrls{display:flex;align-items:center;gap:var(--space-2)}
/* Narrow cards: the controls drop under the title instead of squeezing it */
@media (max-width:48em){
  .c-matrix > h3:has(+ .mx-ctrls){padding-right:0}
  .mx-ctrls{position:static;flex-wrap:wrap;margin:0 0 var(--space-2)}
}
.mx-ctrls .tool-view{margin:0}
.mx-dir{font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--control-radius);width:30px;height:28px;cursor:pointer}
.mx-dir:hover{border-color:var(--ink-2)}
.c-matrix .sub{margin-bottom:var(--space-2)}
.mx-key{flex-wrap:wrap;align-items:center;margin:0}
.mx-key .chg{margin:0 calc(0.125rem * var(--dz)) 0 0}
.mx-key .mx-d{position:static;margin-right:calc(0.125rem * var(--dz))}
.mx-ramp{gap:0 !important}
.mx-key .mx-sw{display:inline-block;width:14px;height:10px;border-radius:var(--radius-1)}
.mx-key .mx-sw.mx-own{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent)}
.mx-key .mx-sw.mx-pos{background:var(--pos);opacity:.5}
.mx-key .mx-sw.mx-neg{background:var(--neg);opacity:.5}

/* The grid follows the Process map: a bordered box scrolling in both axes, a pinned header row of
   department cells with their figures, a pinned label column, and grid lines between cells.
   Every row is its own grid on the same column template, so rows inside the <details> line up. */
.mx-grid{--mx-cols:minmax(12rem,1.3fr) repeat(var(--mx-n),minmax(4.6rem,1fr)) 5.2rem 4.6rem 4.6rem;min-width:fit-content;font-size:var(--fs-sm)}
.mx-row{display:grid;grid-template-columns:var(--mx-cols);align-items:stretch;border-bottom:1px solid var(--grid)}
.mx-row > *{min-width:0}
.mx-row > :not(.mx-name){border-left:1px solid var(--grid)}
.mx-row > .num:nth-last-child(3),.mx-head > .mx-m:nth-last-child(3){border-left:1px solid var(--line)}
.mx-name{position:sticky;left:0;z-index:1;background:var(--surface-2);box-shadow:1px 0 0 var(--line);display:flex;align-items:center;gap:calc(0.375rem * var(--dz));padding:calc(0.375rem * var(--dz)) var(--space-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-lbl{display:flex;flex-direction:column;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.mx-lbl small,.mx-col small{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted);white-space:nowrap}
.mx-col small .mx-from{font-size:inherit}
.mx-corner small{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted);white-space:normal}
.mx-row .num{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-1);padding:0 var(--space-2);font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--surface-2)}
.mx-from{color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.mx-hd{font-style:normal;font-weight:var(--fw-bold)}
.mx-hd.pos{color:var(--pos)}
.mx-hd.neg{color:var(--neg)}
.mx-hd.neu{color:var(--ink-2);font-weight:var(--fw-semibold)}

/* Header row: like the map's stage headers — name, then its figures in small type */
.mx-head{position:sticky;top:0;z-index:2;border-bottom:1px solid var(--line)}
.mx-head > *{background:var(--surface-2)}
.mx-col{overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(0.0625rem * var(--dz));padding:calc(0.4375rem * var(--dz)) calc(0.375rem * var(--dz));line-height:1.25;cursor:default}
.mx-col b{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-2);overflow-wrap:normal;hyphens:none}
.mx-m{text-align:right;align-items:flex-end}
.mx-corner{z-index:3;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:calc(0.125rem * var(--dz));white-space:normal;overflow:visible;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--ink-2)}
.mx-corner .linkish{margin-top:var(--space-1)}

/* Department groups: the summary is the department's row; its roles open beneath */
.mx-grp > summary{cursor:pointer}
.mx-grp > summary:hover .mx-name{background:var(--accent-wash)}
.mx-grp > summary:hover .mx-lbl{text-decoration:underline;text-underline-offset:3px}
.mx-grp > summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.mx-grp[open] > summary .mx-name{background:var(--accent-wash);box-shadow:1px 0 0 var(--line)}
.mx-dept .mx-name{font-size:var(--fs-sm-plus);font-weight:var(--fw-strong)}
.mx-role .mx-name{padding-left:calc(8px + 18px);background:var(--surface);color:var(--ink-2);font-size:var(--fs-sm)}
.mx-tot{font-weight:var(--fw-semibold)}
.mx-load.over{color:var(--neg);font-weight:var(--fw-bold)}

/* Legend under the table */
.c-matrix > .mx-key{margin:var(--space-2) 0 0}

/* Cells: a value chip on a five-step single-hue ramp inside each grid cell; a department's own
   work is the washed cell on the diagonal */
.mx-c{position:relative;display:grid;place-items:center;padding:calc(0.3125rem * var(--dz));min-height:34px;font-variant-numeric:tabular-nums;color:var(--ink)}
.mx-role .mx-c{min-height:28px;padding:calc(0.1875rem * var(--dz)) calc(0.3125rem * var(--dz))}
.mx-c > span{min-width:2.4rem;padding:calc(0.1875rem * var(--dz)) calc(0.375rem * var(--dz));border-radius:var(--radius-5);text-align:center;line-height:1.2}
.mx-c.mx-own{background:var(--accent-wash)}
.mx-c.mx-ghost > span:first-child{border:1px dashed var(--muted);color:var(--muted)}
.mx-mk.chg{position:absolute;top:2px;right:2px;min-width:11px;height:11px;padding:0 calc(0.125rem * var(--dz));margin:0;font-size:var(--fs-3xs)}
.mx-d{position:absolute;top:2px;right:2px;padding:0 calc(0.125rem * var(--dz));border-radius:var(--radius-2);background:var(--surface-2);font-size:var(--fs-3xs);font-weight:var(--fw-bold);line-height:1.2}
.mx-d.pos{color:var(--pos)}
.mx-d.neg{color:var(--neg)}
/* Change view: green more, red less, three strengths */
.mx-c.mx-pos > span,.mx-c.mx-neg > span{position:relative;isolation:isolate}
.mx-c.mx-pos > span::before,.mx-c.mx-neg > span::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pos);opacity:var(--mx-o)}
.mx-c.mx-neg > span::before{background:var(--neg)}
.mx-c.d1{--mx-o:.16}
.mx-c.d2{--mx-o:.38}
.mx-c.d3{--mx-o:1;color:var(--on-chg)}
.mx-change .mx-c{font-weight:var(--fw-semibold)}
/* Level lens: each cell's work split by the part people play (doer → exceptions) */
.mx-c.mx-lv{grid-template-rows:auto auto;gap:calc(0.125rem * var(--dz));align-content:center}
.mx-c.mx-lv > span{padding:0 var(--space-1);font-size:var(--fs-sm)}
.mx-lvbar{display:flex;gap:calc(0.0625rem * var(--dz));width:100%;max-width:4.5rem;height:6px;border-radius:var(--radius-1);overflow:hidden}
.mx-lvbar i{display:block;min-width:2px}