:root{
  --brand-dark: #040305;
  --brand-blue: #004F95;
  --brand-orange: #ED7125;
  --brand-blue-dark: #003B70;
  --tint-blue: #E6EBF1;
  --tint-blue-stronger: #D6DEE8;
  --idle-grey: #f5f5f3;
  --idle-grey-border: #d5d5d2;
}

/* Layout container */
.uj-outer{width:100%;max-width:1300px;margin:0 auto}

/* Filter controls row */
.uj-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-radius:8px 8px 0 0;border-bottom:1px solid #eee;font-size:12px;color:#555}
.uj-controls .djlabel{font-weight:500;margin-right:4px;color:#333}
.role-toggle{padding:4px 10px;border:1px solid #ddd;border-radius:16px;background:#fff;font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:#333;font-family:inherit;transition:all 0.15s}
.role-toggle .swatch{width:10px;height:10px;border-radius:50%;background:#ddd;transition:background 0.15s}
.role-toggle[aria-pressed="true"]{border-color:var(--brand-blue);background:var(--tint-blue);color:var(--brand-blue-dark)}
.role-toggle[aria-pressed="true"] .swatch{background:var(--brand-blue)}
.role-toggle:hover{border-color:#999}
.reset-btn{padding:4px 10px;border:1px solid #ddd;border-radius:16px;background:#fff;font-size:11.5px;cursor:pointer;color:#666;font-family:inherit;margin-left:auto}
.reset-btn:hover{border-color:#999;color:#333}

/* Grid container */
.uj-wrap{width:100%;overflow-x:auto;padding:0.5rem 0 1.5rem;background:#fff;border-radius:0 0 8px 8px;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.uj-table{display:grid;grid-template-columns:170px repeat(6,1fr);min-width:900px}

/* Phase headers (top row, dark) */
.phase-spacer{background:transparent}
.phase-header{background:var(--brand-dark);color:#fff;text-align:center;padding:10px 6px;font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.phase-header:hover{baphase-header:hoverckground:#222}
.phase-header[data-state="col-hi"]{background:var(--brand-blue)}
.phase-header[data-state="pinned"]{background:var(--brand-blue);box-shadow:inset 0 -3px 0 var(--brand-orange)}
.ph-text{flex:1;text-align:center}
.ph-arrow{width:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-right:5px;opacity:0.85}
.phase-header:hover .ph-arrow,
.phase-header[data-state="col-hi"] .ph-arrow,
.phase-header[data-state="pinned"] .ph-arrow{
  color:var(--brand-orange);
  opacity: 1;
}

/* Phase description strip (dark, beneath the header row) */
.phase-desc-strip{grid-column:1/-1;background:#1a1a1c;padding:0 14px;display:flex;align-items:center;gap:10px;overflow:hidden;height:36px;border-bottom:2px solid #333}
.phase-desc-strip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#fff}
.phase-desc-inner{position:relative;flex:1;height:100%;overflow:hidden}
.phase-desc-layer{position:absolute;inset:0;display:flex;align-items:center;transition:opacity 0.35s ease,transform 0.35s ease}
.phase-desc-layer.hint-layer{opacity:1;transform:translateY(0)}
.phase-desc-layer.content-layer{opacity:0;transform:translateY(6px)}
.phase-desc-strip.active .hint-layer{opacity:0;transform:translateY(-6px)}
.phase-desc-strip.active .content-layer{opacity:1;transform:translateY(0)}
.phase-hint{color:#fff;font-style:italic;font-size:13px}
.phase-desc-title{font-weight:500;color:#fff;font-size:13px;margin-right:6px;white-space:nowrap}
.phase-desc-body{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Role label */
.role-label{display:flex;align-items:center;padding:10px 8px;font-size:13px;font-weight:500;color:#333;border-top:1px solid rgba(0,0,0,0.08);background:#fff;line-height:1.3;cursor:pointer;border-left:3px solid transparent;transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease}

/* Phase cell (a column within a role row) */
.phase-cell{border-top:1px solid rgba(0,0,0,0.08);border-right:1px solid rgba(0,0,0,0.08);padding:5px 4px;display:flex;flex-direction:column;gap:4px;background:#fff;transition:background 0.2s ease}
.phase-cell[data-state="col-hi"]{background:var(--tint-blue);}

/* Boxes (action items inside cells) */
.box{background:var(--idle-grey);color:#333;border:1px solid var(--idle-grey-border);border-radius:6px;padding:7px 8px;font-size:13px;text-align:center;cursor:pointer;line-height:1.3;font-weight:500;position:relative;transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}
/* Mouse hover (not click-focus) — fill blue */
.box:hover,
.box:focus-visible{background:var(--brand-blue);color:#fff;border-color:var(--brand-orange);outline:none;box-shadow:0 2px 6px rgba(0,0,0,0.15)}

/* === Row-hovering state — set on .role-group via JS === */
.role-group[data-hover="true"] .role-label{background:var(--tint-blue);border-left-color:var(--brand-orange);color:var(--brand-blue-dark)}
.role-group[data-hover="true"] .phase-cell{background:var(--tint-blue)}
.role-group[data-hover="true"] .desc-strip{background:var(--tint-blue)}
.role-group[data-hover="true"] .banner{background:var(--tint-blue);color:var(--brand-blue-dark)}
/* Boxes within a hovered row: white bg, orange border (idle-but-in-focus look) */
.role-group[data-hover="true"] .box{background:#fff;border-color:var(--brand-orange)}
/* Box being directly hovered/focused inside a hovered row: full blue fill */
.role-group[data-hover="true"] .box:hover,
.role-group[data-hover="true"] .box:focus-visible{background:var(--brand-blue);color:#fff;border-color:var(--brand-orange);box-shadow:0 2px 6px rgba(0,0,0,0.15)}

/* === Pinned state — set via data-state="pinned" === */
.box[data-state="pinned"]{background:var(--brand-blue);color:#fff;border-color:var(--brand-orange);box-shadow:0 0 0 2px var(--brand-orange),0 2px 6px rgba(0,0,0,0.15);padding-right:18px}
.box[data-state="pinned"]::after{content:"\00D7";position:absolute;top:2px;right:5px;font-size:14px;line-height:1;color:rgba(255,255,255,0.9);font-weight:bold;pointer-events:none}
/* Pinned beats hover/row-hover: explicit second declaration ensures specificity wins */
.role-group[data-hover="true"] .box[data-state="pinned"]{background:var(--brand-blue);color:#fff;border-color:var(--brand-orange)}

/* Description strips (one beneath each role row) */
.desc-strip{grid-column:1/-1;border-top:1px dashed rgba(0,0,0,0.15);background:#fafaf8;padding:0 14px;display:flex;align-items:center;gap:10px;overflow:hidden;height:36px;transition:background 0.25s ease}
.desc-strip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--brand-blue)}
.desc-inner{position:relative;flex:1;height:100%;overflow:hidden}
.desc-layer{position:absolute;inset:0;display:flex;align-items:center;transition:opacity 0.35s ease,transform 0.35s ease}
.desc-layer.hint-layer{opacity:1;transform:translateY(0)}
.desc-layer.content-layer{opacity:0;transform:translateY(6px)}
.desc-strip.active .hint-layer{opacity:0;transform:translateY(-6px)}
.desc-strip.active .content-layer{opacity:1;transform:translateY(0)}
.hint{color:#000;font-style:italic;font-size:13px}
.desc-title{font-weight:600;color:#000;font-size:13px;margin-right:6px;white-space:nowrap}
.desc-body{color:#333;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Banners (between role groups) */
.banner{grid-column:1/-1;background:#eeeeec;color:#555;font-size:13px;text-align:center;padding:6px 8px;font-weight:500;border-top:1px solid rgba(0,0,0,0.05);border-bottom:1px solid rgba(0,0,0,0.05);letter-spacing:0.2px;transition:background 0.25s ease,color 0.25s ease,opacity 0.25s ease}

/* Filtered-out (dimmed) rows */
.role-group[data-dimmed="true"] .role-label,
.role-group[data-dimmed="true"] .phase-cell,
.role-group[data-dimmed="true"] .desc-strip,
.role-group[data-dimmed="true"] .banner{opacity:0.25;pointer-events:none}

/* Pin badge in description strips */
.pin-badge{display:inline-block;font-size:9px;background:var(--brand-orange);color:#fff;padding:1px 6px;border-radius:8px;margin-right:6px;vertical-align:middle;font-style:normal;letter-spacing:0.3px;font-weight:600}

.role-group[data-pinned-row="true"] .role-label,
.role-group[data-pinned-row="true"] .phase-cell,
.role-group[data-pinned-row="true"] .desc-strip,
.role-group[data-pinned-row="true"] .banner,
.role-group[data-pinned-row="true"] .box{
  /* Reuse the same hover styling */
}
.role-group[data-pinned-row="true"] .role-label{background:var(--tint-blue);border-left-color:var(--brand-orange);color:var(--brand-blue-dark)}
.role-group[data-pinned-row="true"] .phase-cell{background:var(--tint-blue)}
.role-group[data-pinned-row="true"] .desc-strip{background:var(--tint-blue)}
.role-group[data-pinned-row="true"] .banner{background:var(--tint-blue);color:var(--brand-blue-dark)}
.role-group[data-pinned-row="true"] .box{background:#fff;border-color:var(--brand-orange)}