/* The Process map: the department × stage grid, its process cards, the focused-stage and
   focused-department views, and the map's breadcrumb. The scroll box is in layout.css. */

/* The grid scrolls in both axes inside the viewport, so stage headers and department labels stay
   pinned while the grid moves. */
.map-grid{display:grid;grid-template-columns:128px repeat(12,minmax(112px,1fr));min-width:1480px}
.map-grid .hcell{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(0.1875rem * var(--dz));background:var(--surface-2);padding:calc(0.4375rem * var(--dz)) var(--space-2);font-size:var(--fs-sm);line-height:1.25;font-weight:var(--fw-bold);color:var(--ink-2);border-bottom:1px solid var(--line);border-left:1px solid var(--grid);cursor:default}
.map-grid .hcell small{display:block;font-weight:var(--fw-medium);color:var(--muted);font-size:var(--fs-xs);margin-top:calc(0.0625rem * var(--dz))}
.map-grid .hcell.loop{box-shadow:inset 0 3px 0 var(--accent)}
.map-grid .hcell .hname{cursor:help;align-self:flex-start}
.map-grid .hcell .stack,.map-grid .rcell .stack{height:7px;margin-top:calc(0.125rem * var(--dz));background:transparent}
.map-grid .rcell{position:sticky;left:0;z-index:1;background:var(--surface-2);padding:var(--space-2);font-size:var(--fs-sm-plus);line-height:1.25;font-weight:var(--fw-strong);border-bottom:1px solid var(--grid);box-shadow:1px 0 0 var(--line);display:flex;flex-direction:column;gap:calc(0.125rem * var(--dz))}
.map-grid .rcell small{line-height:1.3;font-weight:var(--fw-medium);color:var(--muted);font-size:var(--fs-xs)}
.map-grid .cell{padding:calc(0.3125rem * var(--dz));border-bottom:1px solid var(--grid);border-left:1px solid var(--grid);display:flex;flex-direction:column;gap:calc(0.3125rem * var(--dz));min-height:44px}
.map-grid .corner{position:sticky;left:0;top:0;z-index:3;background:var(--surface-2);border-bottom:1px solid var(--line);box-shadow:1px 0 0 var(--line);padding:calc(0.4375rem * var(--dz)) var(--space-2);font-size:var(--fs-xs);color:var(--muted)}
/* Stage headers zoom in; department labels open the department */
.map-grid .hcell.act{cursor:zoom-in}
.map-grid .rcell.act{cursor:pointer}
.map-grid .hcell.act:hover,.map-grid .hcell.act:focus-visible,.map-grid .rcell.act:hover,.map-grid .rcell.act:focus-visible{background:var(--accent-wash)}
.map-grid .hcell.act:hover .hname,.map-grid .rcell.act:hover .hname{text-decoration:underline;text-underline-offset:3px}
.map-grid .rcell.sel{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent),1px 0 0 var(--line)}

/* Process card */
.proc{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-1);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-5);padding:calc(0.3125rem * var(--dz)) calc(0.375rem * var(--dz));cursor:pointer;font-size:var(--fs-xs-plus);line-height:1.25}
.proc:hover{border-color:var(--ink-2)}
.proc .pid{font-weight:var(--fw-bold);font-size:var(--fs-2xs);color:var(--muted)}
.proc .pname{color:var(--ink)}
.proc .stack.thin{height:6px}

/* Compact: the whole map on one screen, cards reduced to their IDs */
.map-grid.compact{grid-template-columns:118px repeat(12,minmax(58px,1fr));min-width:820px}
.compact .hcell{padding:calc(0.375rem * var(--dz));font-size:var(--fs-xs)}
.compact .rcell{padding:calc(0.375rem * var(--dz)) var(--space-2);font-size:var(--fs-sm)}
.compact .cell{flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:calc(0.1875rem * var(--dz));padding:var(--space-1) calc(0.1875rem * var(--dz));min-height:30px}
.compact .proc{flex:0 0 auto;min-width:25px;padding:calc(0.125rem * var(--dz)) calc(0.1875rem * var(--dz)) calc(0.1875rem * var(--dz));gap:calc(0.125rem * var(--dz));border-radius:var(--radius-xs)}
.compact .proc .pname,.compact .proc .pfx{display:none}
.compact .proc .pid{font-size:var(--fs-2xs);color:var(--ink);text-align:center}
.compact .proc .stack.thin{height:4px}

/* Focused stage: one wide column, only departments with work in it */
.map-grid.focus{grid-template-columns:150px minmax(0,1fr);min-width:0}

/* Focused department: one summary strip, then the department's row across the stages.
   The summary sits above the scrolling grid; the header row is pinned; only the cards scroll. */
.map-grid.dfocus{min-width:0;grid-template-rows:auto 1fr;min-height:100%}
.map-summary{flex:none;display:flex;flex-wrap:wrap;gap:calc(0.375rem * var(--dz)) calc(1.5rem * var(--dz));align-items:flex-start;padding:calc(0.625rem * var(--dz)) calc(0.875rem * var(--dz));margin-bottom:var(--space-2);background:var(--tile-bg);border:var(--tile-border);border-radius:var(--card-radius)}
.dsum-text{flex:1 1 360px;min-width:0}
.map-summary h3{margin:0;font-size:var(--fs-lg)}
.map-summary .sub{margin:calc(0.125rem * var(--dz)) 0 0;font-size:var(--fs-sm);color:var(--muted)}
.map-summary .purpose{margin:var(--space-1) 0 0;font-size:var(--fs-sm-plus);color:var(--ink-2);max-width:95ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dsum-mix{flex:0 1 280px;min-width:180px;padding-top:var(--space-1)}
.dfocus .hcell.empty{position:sticky;padding:0;overflow:hidden;background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,var(--grid) 6px 7px)}
/* rotated labels must not set the header height: clip them to the row */
.dfocus .hcell.empty span{position:absolute;top:6px;bottom:6px;left:50%;translate:-50% 0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfocus .cell{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2)}
.dfocus .cell.empty{padding:0;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--grid) 6px 7px)}
.dfocus .proc{padding:var(--space-2) calc(0.625rem * var(--dz));font-size:var(--fs-md);gap:calc(0.3125rem * var(--dz))}
.dfocus .proc .pid{font-size:var(--fs-xs)}
.dfocus .proc .stack.thin{height:8px}

/* Map breadcrumb and the previous / next stepper */
.map-crumbs{display:flex;align-items:center;gap:var(--space-1);font-size:var(--fs-sm);min-width:0}
.map-crumbs .hint{color:var(--muted);margin-left:calc(0.375rem * var(--dz))}
.stepper{display:inline-flex;gap:var(--space-1);margin-left:var(--space-2)}

/* Process card states: selected, feeds this one (up), fed by it (down), filtered out */
.proc.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.proc.up{border-color:var(--ink-2);border-style:dashed}
.proc.down{border-color:var(--ink);border-width:2px}
.proc.dim{opacity:.35}