/* /Pages/Obeya/archive/XMatrixV2.razor.rz.scp.css */
:host[b-wziqkt3fb2], .xm-container[b-wziqkt3fb2] {
  --line: #cfd8e3;
  --line-strong: #111827;
  --lane-bg: #f0f7ff;
  --sel: rgba(99, 102, 241, 0.18);
  --sel-border: #6366f1;
  --green: #9bd38b;

  /* Alignment baselines */
  --row-h: 56px;
  --col-w-left: 88px;
  --col-w-right: 88px;
}

/* Macro grid */
.xm-container[b-wziqkt3fb2] {
  display: grid;
  grid-template-areas:
    "tl   top   tr"
    "left center right"
    "bl   bottom br";
  grid-template-columns: minmax(180px, 22%) 1fr minmax(180px, 22%);
  grid-template-rows: minmax(140px, 22%) minmax(420px, 1fr) minmax(160px, 22%);
  gap: 0;
  border: 1px solid var(--line);
  box-sizing: border-box;
}
.quad[b-wziqkt3fb2], .band[b-wziqkt3fb2], .center[b-wziqkt3fb2] { border: 1px solid var(--line); box-sizing: border-box; }
.tl[b-wziqkt3fb2] { grid-area: tl; } .top[b-wziqkt3fb2] { grid-area: top; } .tr[b-wziqkt3fb2] { grid-area: tr; }
.left[b-wziqkt3fb2] { grid-area: left; } .center[b-wziqkt3fb2] { grid-area: center; position: relative; overflow: hidden; }
.right[b-wziqkt3fb2] { grid-area: right; } .bl[b-wziqkt3fb2] { grid-area: bl; } .bottom[b-wziqkt3fb2] { grid-area: bottom; } .br[b-wziqkt3fb2] { grid-area: br; }

/* Lane shading anchored to physical sizes */
.grid[b-wziqkt3fb2] { display: grid; height: 100%; width: 100%; }
.rows[b-wziqkt3fb2] { background-image: linear-gradient(180deg, var(--lane-bg) 1px, transparent 1px); background-size: 100% var(--row-h); background-repeat: repeat; }
.cols-left[b-wziqkt3fb2]  { background-image: linear-gradient(90deg, var(--lane-bg) 1px, transparent 1px); background-size: var(--col-w-left) 100%;  background-repeat: repeat; }
.cols-right[b-wziqkt3fb2] { background-image: linear-gradient(90deg, var(--lane-bg) 1px, transparent 1px); background-size: var(--col-w-right) 100%; background-repeat: repeat; }

/* Grids use shared baselines */
.tl .corr[b-wziqkt3fb2], .bl .corr[b-wziqkt3fb2], .left .headers-h[b-wziqkt3fb2] { grid-template-columns: repeat(var(--cols), var(--col-w-left)); }
.tr .corr[b-wziqkt3fb2], .br .corr[b-wziqkt3fb2], .right .headers-h[b-wziqkt3fb2] { grid-template-columns: repeat(var(--cols), var(--col-w-right)); }
.corr[b-wziqkt3fb2] { grid-template-rows: repeat(var(--rows), var(--row-h)); }
.headers-v[b-wziqkt3fb2] { grid-template-rows: repeat(var(--rows), var(--row-h)); align-items: stretch; }

/* Headers */
.hitem[b-wziqkt3fb2] { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: .6rem; }
.hitem .label[b-wziqkt3fb2] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Buttons and cells */
.cell[b-wziqkt3fb2], .head[b-wziqkt3fb2] {
  border: 1px solid var(--line);
  background: white;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  padding: .25rem;
  cursor: pointer;
  box-sizing: border-box;
}
.cell:hover[b-wziqkt3fb2], .head:hover[b-wziqkt3fb2] { outline: 1px solid var(--sel-border); }
.cell:focus[b-wziqkt3fb2], .head:focus[b-wziqkt3fb2] { outline: 2px solid var(--sel-border); outline-offset: -2px; }

/* Remove double-borders at seams */
.top[b-wziqkt3fb2] { border-bottom: 0; } .tl[b-wziqkt3fb2]  { border-top: 0; }
.bottom[b-wziqkt3fb2] { border-top: 0; } .bl[b-wziqkt3fb2]  { border-bottom: 0; }
.left[b-wziqkt3fb2] { border-right: 0; } .tl[b-wziqkt3fb2], .bl[b-wziqkt3fb2] { border-left: 0; }
.right[b-wziqkt3fb2] { border-left: 0; } .tr[b-wziqkt3fb2], .br[b-wziqkt3fb2] { border-right: 0; }

/* Correlation glyphs */
.cell.dot[b-wziqkt3fb2]::after { content: "•"; font-size: 22px; line-height: 1; }
.cell.strong[b-wziqkt3fb2]::after { content: "●"; font-size: 22px; line-height: 1; }
.cell.cross[b-wziqkt3fb2]::after { content: "×"; font-size: 20px; line-height: 1; }

/* Highlighting */
.hi[b-wziqkt3fb2] { background: rgba(34, 197, 94, 0.14); box-shadow: inset 0 0 0 2px #22c55e; }
.cell.hit[b-wziqkt3fb2] { background: rgba(34, 197, 94, 0.18); outline: 2px solid #22c55e; }
.cell.hovered[b-wziqkt3fb2] { outline: 2px dashed #6366f1; }

/* Vertical labels bottom->top */
.vtext[b-wziqkt3fb2] { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; padding: .25rem .2rem; }

/* Center box */
.center[b-wziqkt3fb2] { border-width: 2px; border-color: var(--line-strong); }
.xsvg[b-wziqkt3fb2] { position: absolute; inset: 0; width: 100%; height: 100%; }
.xbg[b-wziqkt3fb2] { fill: var(--green); }
.xline[b-wziqkt3fb2] { stroke: white; stroke-width: 3; vector-effect: non-scaling-stroke; }
.clabel[b-wziqkt3fb2] { position: absolute; color: #0b1e13; font: 600 1rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.clabel.top[b-wziqkt3fb2] { top: 8px; left: 50%; transform: translateX(-50%); }
.clabel.bottom[b-wziqkt3fb2] { bottom: 8px; left: 50%; transform: translateX(-50%); }
.clabel.left[b-wziqkt3fb2] { left: 8px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.clabel.right[b-wziqkt3fb2] { right: 8px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }

/* Bullets */
.bullet[b-wziqkt3fb2] { width: 10px; height: 10px; border-radius: 50%; background: var(--bclr); display: inline-block; }

/* Branding */
.branding[b-wziqkt3fb2] { display: grid; justify-content: end; gap: 2px; margin-top: .5rem; font: 500 .85rem/1.1 system-ui; color: #4b5563; }
.brand-name[b-wziqkt3fb2] { font-weight: 700; }

@media (max-width: 1100px) {
  :host[b-wziqkt3fb2], .xm-container[b-wziqkt3fb2] { --row-h: 48px; --col-w-left: 72px; --col-w-right: 72px; }
}
/* /Pages/Obeya/archive/XMatrixV3.razor.rz.scp.css */
/* XMatrixV3 • Light theme + alignment fix
   - Bands in normal flow (no absolute on .topRows/.rows)
   - Side panes height = --figH
   - Matrices remain absolute overlays; top/height set by JS
   - Shared baselines: --rowH, --metricH, --leftPane, --rightPane
*/

:root[b-qnrtvhztll] {
  --ink: #1f2937;
  --grid: #d6dee8;
  --stroke: #111827;
  --accent: #2563eb;
  --accent-weak: #e9efff;
  --hl: rgba(37,99,235,.14);
  --leftPane: 240px;
  --rightPane: 240px;
  --figH: 500px;
  --rowH: 34px;
  --metricH: 36px;
}

*[b-qnrtvhztll] { box-sizing: border-box; }
html[b-qnrtvhztll], body[b-qnrtvhztll] { height: 100%; background:#fff; color: var(--ink); }
button[b-qnrtvhztll] { font: inherit; }
.container[b-qnrtvhztll] { width:min(1500px,96vw); margin:22px auto; padding:12px; }

/* Board */
.board[b-qnrtvhztll] { position: relative; color: var(--ink); }
figure[b-qnrtvhztll] { margin:0; }

/* Center rectangle */
.quad[b-qnrtvhztll] { display:block; width: calc(100% - var(--leftPane) - var(--rightPane)); margin-left: var(--leftPane); margin-right: var(--rightPane); height:auto; }
svg[b-qnrtvhztll] { display:block; width:100%; height:auto; }
.quad rect[b-qnrtvhztll], .quad line[b-qnrtvhztll] { stroke: var(--stroke); }

/* LEFT overlays */
.leftHL[b-qnrtvhztll], .leftLines[b-qnrtvhztll], .leftCols[b-qnrtvhztll] { position:absolute; top:0; left:0; width: var(--leftPane); display:grid; }
.leftHL[b-qnrtvhztll] { z-index:1; pointer-events:none; }
.leftHL .col.on[b-qnrtvhztll] { background: var(--hl); }
.leftLines[b-qnrtvhztll] { z-index:2; pointer-events:none; border-left:1.5px solid var(--stroke); border-top:1.5px solid var(--stroke); }
.leftLines > div[b-qnrtvhztll] { border-right:1.5px solid var(--grid); }
.leftCols[b-qnrtvhztll] { height: var(--figH); z-index:3; align-items:flex-start; justify-items:center; padding-top:6px; gap:0; pointer-events:auto; }
.lcol[b-qnrtvhztll] { position:relative; width:100%; height:100%; display:flex; justify-content:center; }
.vtext[b-qnrtvhztll] { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); outline:none; min-height:28px; padding:4px; border:0; background:transparent; text-align:center; }
.vtext:empty[b-qnrtvhztll]::before { content:attr(data-placeholder); color:#9aa3af; }
.vtext.hl[b-qnrtvhztll] { background: var(--hl); border-radius:4px; }
.delLCol[b-qnrtvhztll], .delRCol[b-qnrtvhztll] { position:absolute; top:4px; left:50%; transform:translateX(-50%); width:24px; height:24px; border:1px solid var(--grid); background:#fff; cursor:pointer; border-radius:4px; z-index:7; }
.delLCol:hover[b-qnrtvhztll], .delRCol:hover[b-qnrtvhztll] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-weak); }

/* RIGHT overlays */
.rightHL[b-qnrtvhztll], .rightLines[b-qnrtvhztll], .rightCols[b-qnrtvhztll] { position:absolute; top:0; right:0; width: var(--rightPane); display:grid; }
.rightHL[b-qnrtvhztll] { z-index:1; pointer-events:none; }
.rightHL .col.on[b-qnrtvhztll] { background: var(--hl); }
.rightLines[b-qnrtvhztll] { z-index:2; pointer-events:none; border-right:1.5px solid var(--stroke); border-top:1.5px solid var(--stroke); }
.rightLines > div[b-qnrtvhztll] { border-left:1.5px solid var(--grid); }
.rightCols[b-qnrtvhztll] { height: var(--figH); z-index:3; align-items:flex-start; justify-items:center; padding-top:6px; gap:0; pointer-events:auto; }
.rcol[b-qnrtvhztll] { position:relative; width:100%; height:100%; display:flex; justify-content:center; }
.rtext[b-qnrtvhztll] { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); outline:none; min-height:28px; padding:4px; border:0; background:transparent; text-align:center; }
.rtext:empty[b-qnrtvhztll]::before { content:attr(data-placeholder); color:#9aa3af; }
.rtext.hl[b-qnrtvhztll] { background: var(--hl); border-radius:4px; }

/* TOP band (normal flow) */
.topRows[b-qnrtvhztll] { display:grid; gap:0; margin-top:0; }
.topRowWrap[b-qnrtvhztll] { position:relative; }
.topRow[b-qnrtvhztll] {
  border:1.5px solid var(--grid);
  min-height: var(--rowH);
  padding:6px calc(var(--rightPane) + 76px) 6px calc(var(--leftPane) + 12px);
  outline:none; line-height:1.25; background:#fff; white-space:nowrap;
}
.topRowWrap + .topRowWrap .topRow[b-qnrtvhztll] { border-top-width:0; }
.topRow:empty[b-qnrtvhztll]::before { content:attr(data-placeholder); color:#9aa3af; }
.topRow.hl[b-qnrtvhztll] { background: var(--accent-weak); }
.delTopBtn[b-qnrtvhztll], .linkBtn[b-qnrtvhztll], .openBtn[b-qnrtvhztll] { position:absolute; top:5px; right: calc(var(--rightPane) + 10px); width:26px; height:26px; border:1.5px solid var(--grid); background:#fff; cursor:pointer; border-radius:4px; z-index:6; }
.linkBtn[b-qnrtvhztll] { right: calc(var(--rightPane) + 40px); }
.openBtn[b-qnrtvhztll] { right: calc(var(--rightPane) + 70px); }
.delTopBtn:hover[b-qnrtvhztll], .linkBtn:hover[b-qnrtvhztll], .openBtn:hover[b-qnrtvhztll] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-weak); }

/* Metrics */
.metricsWrap[b-qnrtvhztll] { position:relative; display:grid; grid-template-columns: var(--leftPane) 1fr; align-items:stretch; margin:0; border-bottom:1.5px solid var(--stroke); }
.metricLabels[b-qnrtvhztll] { position:absolute; left:-120px; top:0; width:110px; display:grid; grid-template-rows: repeat(3, var(--metricH)); }
.metricLabels .mlab[b-qnrtvhztll] { border:1.5px solid var(--grid); border-right:none; display:flex; align-items:center; justify-content:flex-end; padding:0 8px; background:#fff; white-space:nowrap; font-size:14px; border-radius:4px 0 0 4px; }
.metricsLeft[b-qnrtvhztll] { display:grid; grid-template-rows: repeat(3, var(--metricH)); border-left:1.5px solid var(--stroke); border-top:1.5px solid var(--stroke); }
.mcell[b-qnrtvhztll] { border-right:1.5px solid var(--grid); border-bottom:1.5px solid var(--grid); display:flex; align-items:center; justify-content:center; padding:2px; }
.mval[b-qnrtvhztll]  { width:100%; text-align:center; outline:none; border:0; background:transparent; white-space:nowrap; }
.metricsRightCenter[b-qnrtvhztll] { display:grid; grid-template-rows: repeat(3, var(--metricH)); border-top:1.5px solid var(--stroke); }
.mission[b-qnrtvhztll], .winning[b-qnrtvhztll], .spacer[b-qnrtvhztll] { border-left:1.5px solid var(--grid); border-bottom:1.5px solid var(--grid); min-height:var(--metricH); background: linear-gradient(#fff, #f7fbff); display:flex; align-items:center; justify-content:center; text-align:center; padding:4px; }
.mission[b-qnrtvhztll], .winning[b-qnrtvhztll] { font-size:1.6em; font-weight:700; letter-spacing:.2px; }

/* Right metrics axis; top set by JS */
.metricsRightAxis[b-qnrtvhztll] { position:absolute; right:0; width: var(--rightPane); display:grid; grid-template-rows: repeat(3, var(--metricH)); border-top:1.5px solid var(--stroke); border-right:1.5px solid var(--stroke); border-bottom:1.5px solid var(--stroke); z-index:3; }
.mcellR[b-qnrtvhztll] { border-left:1.5px solid var(--grid); border-bottom:1.5px solid var(--grid); display:flex; align-items:center; justify-content:center; padding:2px; }
.mvalR[b-qnrtvhztll]  { width:100%; text-align:center; outline:none; border:0; background:transparent; white-space:nowrap; }

/* BOTTOM band (normal flow) */
.rows[b-qnrtvhztll] { display:grid; gap:0; margin-top:0; }
.rowWrap[b-qnrtvhztll] { position:relative; }
.row[b-qnrtvhztll] { border:1.5px solid var(--grid); min-height: var(--rowH); padding:6px calc(var(--rightPane) + 12px) 6px calc(var(--leftPane) + 12px); outline:none; line-height:1.25; background:#fff; white-space:nowrap; }
.rowWrap + .rowWrap .row[b-qnrtvhztll] { border-top-width:0; }
.row:empty[b-qnrtvhztll]::before { content:attr(data-placeholder); color:#9aa3af; }
.row.hl[b-qnrtvhztll] { background: var(--accent-weak); }
.delRowBtn[b-qnrtvhztll] { position:absolute; top:4px; right: calc(6px + var(--rightPane)); width:26px; height:26px; border:1.5px solid var(--grid); background:#fff; cursor:pointer; border-radius:4px; z-index:6; }
.delRowBtn:hover[b-qnrtvhztll] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-weak); }

/* Seam guides to meet rectangle borders */
.rows .rowWrap:first-child .row[b-qnrtvhztll]::before { content:""; position:absolute; top:-1.5px; left:0; width: var(--leftPane); border-top:1.5px solid var(--stroke); height:0; pointer-events:none; }
.rows .rowWrap:first-child .row[b-qnrtvhztll]::after  { content:""; position:absolute; top:-1.5px; right:0; width: var(--rightPane); border-top:1.5px solid var(--stroke); height:0; pointer-events:none; }

/* Matrices overlay bands; top/height set by JS */
.matrixTopLeft[b-qnrtvhztll], .matrixTopRight[b-qnrtvhztll], .matrixBottomLeft[b-qnrtvhztll] { position:absolute; display:grid; z-index:4; pointer-events:auto; grid-auto-rows: var(--rowH); }
.matrixTopLeft[b-qnrtvhztll], .matrixBottomLeft[b-qnrtvhztll] { left:0; width: var(--leftPane); }
.matrixTopRight[b-qnrtvhztll] { right:0; width: var(--rightPane); }

/* Cells and highlight */
.cell[b-qnrtvhztll] { position:relative; display:grid; place-items:center; cursor:pointer; border:1px solid transparent; min-height: var(--rowH); }
.cell[b-qnrtvhztll]::after { content:""; width:0; height:0; border-radius:50%; transition:all .15s ease; }
.cell.on[b-qnrtvhztll]::after { width:11px; height:11px; background: var(--accent); }
.cell.hl[b-qnrtvhztll] { background: var(--hl); }
.cell:focus[b-qnrtvhztll] { outline:2px solid var(--accent); outline-offset:-2px; }

/* Toolbar */
.toolbar[b-qnrtvhztll] { margin-top:18px; display:flex; gap:10px; }
.btn[b-qnrtvhztll] { padding:8px 14px; border:1.5px solid var(--grid); background:linear-gradient(#fff,#fafafa); border-radius:6px; cursor:pointer; }
.btn:hover[b-qnrtvhztll] { border-color: var(--accent); box-shadow:0 0 0 2px var(--accent-weak); }

/* Responsive */
@media (max-width: 1280px) { :root[b-qnrtvhztll] { --leftPane: 200px; --rightPane: 200px; --rowH: 32px; } }
@media (max-width: 1024px) { .container[b-qnrtvhztll] { width:100%; padding:8px; } }
/* /Pages/Obeya/XMatrix.razor.rz.scp.css */
:root[b-2rbnvafz6f] {
  --line: #d0d7de;
  --sel: rgba(99, 102, 241, 0.18);
  --sel-border: #6366f1;
}

.xm-container[b-2rbnvafz6f] {
  display: grid;
  grid-template-areas:
    "tl   top   tr"
    "left center right"
    "bl   bottom br";
  grid-template-columns: minmax(140px, 18%) 1fr minmax(140px, 18%);
  grid-template-rows: minmax(90px, 20%) minmax(240px, 1fr) minmax(90px, 20%);
  gap: 0;
  border: 1px solid var(--line);
}

.quad[b-2rbnvafz6f], .band[b-2rbnvafz6f], .center[b-2rbnvafz6f] {
  border: 1px solid var(--line);
}

.tl[b-2rbnvafz6f]     { grid-area: tl; }
.top[b-2rbnvafz6f]    { grid-area: top; }
.tr[b-2rbnvafz6f]     { grid-area: tr; }
.left[b-2rbnvafz6f]   { grid-area: left; }
.center[b-2rbnvafz6f] { grid-area: center; position: relative; }
.right[b-2rbnvafz6f]  { grid-area: right; }
.bl[b-2rbnvafz6f]     { grid-area: bl; }
.bottom[b-2rbnvafz6f] { grid-area: bottom; }
.br[b-2rbnvafz6f]     { grid-area: br; }

.grid[b-2rbnvafz6f] {
  display: grid;
  height: 100%;
  width: 100%;
}

.corr[b-2rbnvafz6f] {
  grid-template-rows: repeat(var(--rows), minmax(28px, 1fr));
  grid-template-columns: repeat(var(--cols), minmax(28px, 1fr));
}

.headers-h[b-2rbnvafz6f] {
  grid-template-columns: repeat(var(--cols), 1fr);
  align-items: stretch;
}

.headers-v[b-2rbnvafz6f] {
  grid-template-rows: repeat(var(--rows), 1fr);
  align-items: stretch;
}

.cell[b-2rbnvafz6f], .head[b-2rbnvafz6f] {
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 0.25rem;
  width: 100%;
  height: 100%;
  background: white;
  cursor: pointer;
}

.cell:hover[b-2rbnvafz6f], .head:hover[b-2rbnvafz6f] {
  outline: 1px solid var(--sel-border);
}

.sel[b-2rbnvafz6f] {
  background: var(--sel);
}

/* Correlation glyphs */
.cell.dot[b-2rbnvafz6f]::after {
  content: "•";
  font-size: 22px;
  line-height: 1;
}
.cell.strong[b-2rbnvafz6f]::after {
  content: "●";
  font-size: 22px;
  line-height: 1;
}

/* Vertical label text that reads bottom -> top */
.vtext[b-2rbnvafz6f] {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.head[b-2rbnvafz6f] {
  font: 500 0.9rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Center X */
.xsvg[b-2rbnvafz6f] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.xsvg line[b-2rbnvafz6f] {
  stroke: #111827;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

/* Legend */
.legend[b-2rbnvafz6f] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.85rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin-top: 0.75rem;
}
.legend .chip[b-2rbnvafz6f] {
  border: 1px solid var(--line);
  padding: 0.15rem 0.45rem;
  border-radius: 0.375rem;
}
.legend .chip.dot[b-2rbnvafz6f]::after { content: " •"; }
.legend .chip.strong[b-2rbnvafz6f]::after { content: " ●"; }

/* Small screens */
@media (max-width: 900px) {
  .xm-container[b-2rbnvafz6f] {
    grid-template-columns: 22% 1fr 22%;
    grid-template-rows: 18% 1fr 18%;
  }
  .head[b-2rbnvafz6f] { font-size: 0.8rem; }
}