@layer features {

/* ── Team Workload panel — wraps all per-QC cards ── */
.qc-cap-team-workload-panel {
  padding: 16px 18px;
  margin: 20px 0;
  background: var(--color-bg-surface);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}
.qc-cap-team-workload-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 0; }
.qc-cap-team-workload-title,
.qc-cap-team-summary-title,
.qc-dp-panel-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);            /* unbold per [[feedback-unbold-text]] */
  color: var(--color-accent);                        /* brand-blue */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
/* Headline = stacked title + optional hint. Sits on the left of the
 * section header; the chevron toggle (and section actions, where present)
 * stay on the right. */
.qc-cap-section-headline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.qc-cap-section-hint {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.4;
}
/* Each QC takes a full row — the extra horizontal space is used by the
   Throughput Trend chart alongside the pies. */
.qc-cap-team-workload-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.qc-cap-team-summary-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 0; }
/* (Title styling lives in the combined rule above with the other two
 * section titles — keep their selectors here as a no-op anchor so future
 * `grep qc-cap-team-summary-title` still hits this file at this offset.) */
.qc-cap-team-summary-legend { font-size: var(--font-size-xs); color: var(--color-text-secondary); display: flex; gap: 14px; flex-wrap: wrap; }
.qc-cap-team-summary-legend-item { white-space: nowrap; padding: 3px 10px; border-radius: var(--radius-lg); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); cursor: help; }
.qc-cap-team-summary-legend-item.legend-green { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--c-success-500); }
.qc-cap-team-summary-legend-item.legend-amber { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--c-warning-500); }
.qc-cap-team-summary-legend-item.legend-red { background: var(--color-danger-bg); color: var(--color-danger-text); border: 1px solid var(--c-danger-500); }
.qc-cap-team-summary-hint { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 12px; font-style: italic; }
/* Calendar inside the Team Capacity panel — separator + slight inset so it
   reads as part of the same block rather than a standalone card. */
.qc-cap-team-summary-calendar { margin-top: 14px; padding-top: 0; }
.qc-cap-team-summary-note { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 8px; background: #f3e8ff; border: 1px solid #c4b5fd; padding: 8px 10px; border-radius: 6px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.qc-cap-team-summary-note code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; font-size: var(--font-size-xs); }
.qc-cap-team-summary-note-chip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #6b21a8; color: var(--color-text-inverse); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); flex-shrink: 0; font-style: normal; }

/* Test Excellence rows in the per-card project table are dimmed slightly
   so users see at a glance they don't drive Load%. */
.qc-cap-project-table tbody tr.is-test-excellence { opacity: 0.75; }
.qc-cap-project-table tbody tr.is-test-excellence:hover { opacity: 1; }

/* ── Tabbed workload chart wrapper ─────────────────────────────────────
 * Centers the toggle bar, caption, and donut + legend pair as a single
 * column. The donut row (`.qc-cap-pie`) centers its inner flex content
 * so the donut+legend pair sits balanced in the card cell. */
.qc-cap-pie-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.qc-cap-pie-tabs > .qc-cap-pie-caption {
  text-align: center;
  max-width: 460px;
}
.qc-cap-pie-tabs > .qc-cap-pie {
  justify-content: center;
  width: 100%;
}

/* ── Tab toggle (By Type / By Status) — Joy UI / MUI ToggleButtonGroup
 * "soft" variant. Flat pill background (no hard outer border), title-case
 * text (no uppercase, no letter-spacing). Active button picks up a soft
 * lavender tint matching the brand. */
.qc-cap-pie-toggle {
  display: inline-flex;
  padding: 3px;                                   /* breathing room around buttons inside the pill */
  background: rgba(0, 0, 0, 0.04);                /* soft grey wash — no hard border */
  border-radius: 8px;
  gap: 2px;
}
.qc-cap-pie-toggle-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 14px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;                              /* no tracking — title case reads naturally */
  text-transform: none;                           /* keep "By Type" / "By Status" as-typed */
  color: rgba(0, 0, 0, 0.62);
  cursor: pointer;
  border-radius: 6px;
  transition:
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}
.qc-cap-pie-toggle-btn:hover { background: rgba(63, 91, 255, 0.06); color: rgba(0, 0, 0, 0.87); }
.qc-cap-pie-toggle-btn.is-active {
  background: rgba(63, 91, 255, 0.12);            /* brand-blue soft variant */
  color: var(--color-accent);
}
.qc-cap-pie-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(63, 91, 255, 0.45);
}

.qc-cap-pie-wrap { flex: 1 1 280px; min-width: 280px; display: flex; flex-direction: column; }
.qc-cap-pie-wrap .qc-cap-pie { margin: 0; }
.qc-cap-pie-caption { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.45; margin-bottom: 6px; padding: 0 4px; }
.qc-cap-pie-caption strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

/* ── Tier coloring ─────────────────────────────────────────────────────
 * Frame is uniform light grey across all tiles (matches MUI Joy Bio Card).
 * Tier signal lives in TWO places only:
 *   1. `color` → flows into the gauge ring via currentColor on the SVG
 *      stroke (the dominant spot-the-overloaded signal at any distance).
 *   2. tier-chip background + text → the small "PRO badge" pill below
 *      the gauge.
 * Card border + body bg stay neutral so the wall of cards reads as one
 * grid; the rings + chips do the color storytelling. */
.qc-cap-load-tile.load-green { color: #2e7d32; }
.qc-cap-load-tile.load-green .qc-cap-load-tile-tier-chip {
  background: rgba(46, 125, 50, 0.14);
  color: #1b5e20;
}

.qc-cap-load-tile.load-amber { color: #ed6c02; }
.qc-cap-load-tile.load-amber .qc-cap-load-tile-tier-chip {
  background: rgba(237, 108, 2, 0.14);
  color: #663c00;
}

.qc-cap-load-tile.load-red { color: #d32f2f; }
.qc-cap-load-tile.load-red .qc-cap-load-tile-tier-chip {
  background: rgba(211, 47, 47, 0.14);
  color: #b71c1c;
}

.qc-cap-load-tile.load-nodata {
  color: rgba(0, 0, 0, 0.38);
  /* border stays at the neutral default — no tier to signal */
}
.qc-cap-load-tile.load-nodata .qc-cap-load-tile-tier-chip {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
.qc-cap-load-tile.load-nodata .qc-cap-load-tile-pct {
  color: rgba(0, 0, 0, 0.38);
}
/* Redacted tile/card — the viewer is not a QC Lead, so this other-QC's
   numbers are hidden. Slightly more muted than no-data; lock chip in
   place of the load tier label. */
.qc-cap-load-tile-redacted { cursor: not-allowed; opacity: 0.7; }
.qc-cap-load-tile-redacted:hover { background: var(--color-bg-surface-alt); }
.qc-cap-load-tile-lock { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }

.qc-cap-workload { margin-top: 16px; }
.qc-cap-card {
  border: 1.5px solid rgba(0, 0, 0, 0.08);          /* uniform soft grey — same as the load tiles above */
  border-radius: 10px;
  padding: 12px;
  background: var(--color-bg-surface);
  /* Sticky chrome (app-top-header 64px + brand 64px) — reserve room so
   * scrollIntoView(block: 'start') lands the card below the chrome and
   * with some breathing space, not flush against it. */
  scroll-margin-top: 80px;
  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Transient highlight when the "View details" button on a capacity tile
 * scrolls to this card. Brand-blue ring + glow, ~1.6s before the JS
 * removes the class. */
.qc-cap-card--just-scrolled {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 4px rgba(63, 91, 255, 0.18),
              0 6px 16px rgba(63, 91, 255, 0.18);
}
/* Border tone mirrors the QC's Team Capacity Forecast tile above:
   green = available, amber = loaded, red = overloaded. */
/* Project card border stays uniform neutral (rgba(0,0,0,0.08) from the
 * base .qc-cap-card rule). Tier signal lives only on the load tiles at
 * the top of the page — the project card doesn't need its own tier ring. */
.qc-cap-card-redacted { background: var(--color-bg-surface-alt); opacity: 0.75; }
.qc-cap-card-redacted-body { padding: 24px 16px; text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.qc-cap-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qc-cap-card-header-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.qc-cap-card-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.qc-cap-card-pillar { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.qc-cap-card-time-off-btn { font-size: var(--font-size-xs); padding: 7px 14px; background: var(--color-border-subtle); border: 1px solid var(--color-border-default); border-radius: 6px; cursor: pointer; color: var(--color-text-primary); font-weight: var(--font-weight-medium); white-space: nowrap; flex-shrink: 0; transition: background-color 0.15s, border-color 0.15s; }
.qc-cap-card-time-off-btn:hover { background: var(--color-border-default); border-color: var(--color-text-muted); }

/* Load% summary bar (between card header and project table) */
.qc-cap-card-summary { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.qc-cap-card-load { display: flex; align-items: center; gap: 8px; }
.qc-cap-card-load-label { font-size: var(--font-size-xs); white-space: nowrap; min-width: 70px; }
.qc-cap-card-load-bar { flex: 1; height: 8px; background: var(--color-border-default); border-radius: var(--radius-sm); overflow: hidden; }
.qc-cap-card-load-fill { height: 100%; border-radius: var(--radius-sm); transition: width 0.3s; }
.qc-cap-card-load-stats { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* Color tiers */
.qc-cap-card-summary.load-green .qc-cap-card-load-label { color: var(--color-success-text); }
.qc-cap-card-summary.load-green .qc-cap-card-load-fill { background: var(--c-success-500); }
.qc-cap-card-summary.load-amber .qc-cap-card-load-label { color: var(--color-warning-text); }
.qc-cap-card-summary.load-amber .qc-cap-card-load-fill { background: var(--c-warning-500); }
.qc-cap-card-summary.load-red .qc-cap-card-load-label { color: var(--color-danger-text); }
.qc-cap-card-summary.load-red .qc-cap-card-load-fill { background: var(--c-danger-500); }

.qc-cap-no-projects { font-size: var(--font-size-xs); color: var(--color-text-secondary); padding: 8px 0; }

.qc-cap-project-table-wrap { overflow-x: auto; margin: 8px 0 4px; }
.qc-cap-project-table { border-collapse: collapse; font-size: var(--font-size-xs); table-layout: fixed; width: 100%; min-width: 600px; }
.qc-cap-project-table th { text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 6px; border-bottom: 1px solid var(--color-border-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-cap-project-table td { padding: 7px 6px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-cap-project-table tbody tr.qc-cap-project-row-parent.is-anchor td:first-child { border-left: 3px solid #3f5bff; }
.qc-cap-project-table tbody tr.qc-cap-project-row-parent.is-shadow td:first-child { border-left: 3px solid #4338ca; }
.qc-cap-project-table tbody tr.qc-cap-project-row-parent.is-injection td:first-child { border-left: 3px solid #a21caf; }
.qc-cap-project-table tbody tr.qc-cap-project-row-parent.is-test-excellence td:first-child { border-left: 3px solid #6b21a8; }
.qc-cap-project-table tbody tr.qc-cap-project-row-parent.is-automation td:first-child { border-left: 3px solid #0f766e; }
.qc-cap-project-table thead th:first-child { padding-left: 9px; }

/* Align headers with their column content:
   - TYPE: badges sit after a 22px expand-toggle (or its placeholder), so the
     header is indented by the same amount so they line up vertically.
   - WORKLOAD: the column is right-aligned (pills + "Total"), so the header
     needs to match. */
.qc-cap-project-table thead th.qc-cap-col-type    { padding-left: 31px; }
.qc-cap-project-table thead th.qc-cap-col-workload { text-align: right; }
.qc-cap-project-table thead th.qc-cap-col-forecast { text-align: right; }

/* Fixed column widths so all QC cards have identical column layout */
.qc-cap-col-type    { width: 170px; overflow: visible; }
.qc-cap-col-project { width: 150px; }
.qc-cap-col-sprint  { width: 165px; }
.qc-cap-col-forecast { width: 70px; overflow: visible; text-align: right; padding-right: 4px; }
.qc-cap-col-workload { width: 175px; overflow: visible; text-align: right; }

/* Expand/collapse toggle for project parent rows */
/* MUI X SimpleTreeView expand toggle (same pattern as .qc-dp-expand in
 * Delivery Monitoring). Borderless circular icon button, slim Feather
 * chevron that rotates 90° via [aria-expanded="true"]. */
.qc-cap-expand-toggle {
  width: 24px; height: 24px;
  min-width: 24px;
  padding: 0;
  margin-right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  box-shadow: none;
  vertical-align: middle;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-cap-expand-toggle:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.87); }
.qc-cap-expand-toggle:focus-visible { outline: 2px solid rgba(63, 91, 255, 0.5); outline-offset: 1px; }
.qc-cap-expand-toggle-icon {
  width: 16px; height: 16px;
  display: block;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-cap-expand-toggle[aria-expanded="true"] .qc-cap-expand-toggle-icon { transform: rotate(90deg); }
.qc-cap-expand-toggle-placeholder { display: inline-block; width: 24px; height: 24px; margin-right: 4px; vertical-align: middle; }

/* Iteration child rows — slightly muted to signal sub-detail */
.qc-cap-iteration-row td { background: var(--color-bg-surface-alt); padding-top: 5px; padding-bottom: 5px; }
.qc-cap-iteration-row td:first-child { border-left: 3px solid transparent !important; }
.qc-cap-iteration-arrow { color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }

.qc-cap-project-row-role { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: var(--radius-md); font-weight: var(--font-weight-medium); display: inline-block; }
.qc-cap-project-row.is-anchor .qc-cap-project-row-role { background: rgba(63, 91, 255, 0.12); color: #1e3a99; }
.qc-cap-project-row.is-shadow .qc-cap-project-row-role { background: #e0e7ff; color: #4338ca; }
.qc-cap-project-row.is-injection .qc-cap-project-row-role { background: #fae8ff; color: #a21caf; }
.qc-cap-project-row.is-test-excellence .qc-cap-project-row-role { background: #f3e8ff; color: #6b21a8; }
.qc-cap-project-row.is-automation .qc-cap-project-row-role { background: #ccfbf1; color: #0f766e; }

.qc-cap-project-row-label { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.qc-cap-project-row-sprint { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.qc-cap-project-row-buckets { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.qc-cap-project-row-total { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-left: 6px; }

/* ── Status pills (Workload + Forecast columns) ────────────────────────
 * MUI semantic palette per bucket:
 *   Open       → red    (error.main @ 14% bg + dark text)
 *   In Progress → yellow (yellow.700 @ 20% bg + dark mustard text)
 *   Done       → green  (success.main @ 14% bg + dark text)
 *   Forecast   → blue   (primary.main @ 14% bg + dark text)
 * Round shape (border-radius: 999px). Border removed — soft tint bg is
 * the whole signal. */
.qc-cap-bucket-pill {
  display: inline-block;
  min-width: 30px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  cursor: pointer;
  user-select: none;
  border: none;
  font-variant-numeric: tabular-nums;
  transition: filter 0.15s;
}
.qc-cap-bucket-pill:hover { filter: brightness(0.94); }
.qc-cap-bucket-pill.disabled { cursor: default; opacity: 0.4; }
.qc-cap-bucket-pill.disabled:hover { filter: none; }
.qc-cap-bucket-pill.bucket-open       { background: rgba(211, 47, 47, 0.14);  color: #b71c1c; }
.qc-cap-bucket-pill.bucket-inprogress { background: rgba(249, 168, 37, 0.22); color: #6a4500; }
.qc-cap-bucket-pill.bucket-closed     { background: rgba(46, 125, 50, 0.14);  color: #1b5e20; }
.qc-cap-bucket-pill.bucket-forecast   { background: rgba(25, 118, 210, 0.14); color: #0d47a1; }
.qc-cap-aging-cell { font-variant-numeric: tabular-nums; }
.qc-cap-aging-cell.qc-cap-aging-warm { color: var(--color-warning-text); font-weight: var(--font-weight-semibold); }
.qc-cap-aging-cell.qc-cap-aging-hot { color: var(--color-danger-text); font-weight: var(--font-weight-bold); }

.qc-cap-project-risk { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; padding: 1px 8px; border-radius: 10px; display: inline-block; border: 1px solid transparent; }
.qc-cap-project-risk.healthy { color: var(--color-success-text); background: var(--color-success-bg); border-color: var(--c-success-500); }
.qc-cap-project-risk.behind { color: var(--color-warning-text); background: var(--color-warning-bg); border-color: var(--c-warning-500); }
.qc-cap-project-risk.no-data { color: var(--color-text-secondary); background: var(--color-border-subtle); border-color: var(--color-border-default); }

.qc-cap-calendar { margin-top: 16px; overflow-x: auto; }
.qc-cap-calendar-table { border-collapse: collapse; width: max-content; min-width: 100%; }
.qc-cap-calendar-table th, .qc-cap-calendar-table td { border: 1px solid var(--color-border-default); padding: 4px 6px; font-size: var(--font-size-xs); text-align: center; vertical-align: middle; min-width: 56px; }
.qc-cap-calendar-table th.qc-cap-name-col, .qc-cap-calendar-table td.qc-cap-name-col { text-align: left; min-width: 140px; position: sticky; left: 0; background: var(--color-bg-surface); }
.qc-cap-cell-green { background: var(--color-success-bg); color: var(--color-success-text); }
.qc-cap-cell-amber { background: var(--color-warning-bg); color: var(--color-warning-text); }
.qc-cap-cell-red { background: var(--color-danger-bg); color: var(--color-danger-text); }
.qc-cap-cell-off { background: var(--color-border-default); color: var(--color-text-secondary); }
.qc-cap-cell-weekend { background: var(--color-bg-surface-alt); color: var(--color-text-muted); }
.qc-cap-cell-no-sprint { background: var(--color-bg-surface-alt); color: var(--color-text-muted); font-style: italic; }
.qc-cap-cell { cursor: default; }
.qc-cap-cell[title] { cursor: help; }
/* Today: stronger left + right borders to outline the whole column, and a
   bold underlined header so the user can locate today at a glance. */
.qc-cap-calendar-table th.qc-cap-cell-today { background: var(--color-text-link); color: var(--color-text-inverse); font-weight: var(--font-weight-bold); border-color: var(--color-text-link); }
.qc-cap-calendar-table td.qc-cap-cell-today { border-left: 2px solid var(--color-text-link); border-right: 2px solid var(--color-text-link); box-shadow: inset 0 0 0 1px rgba(24, 95, 165, 0.15); }
.qc-cap-calendar-table tbody tr:first-child td.qc-cap-cell-today { border-top: 2px solid var(--color-text-link); }
.qc-cap-calendar-table tbody tr:last-child td.qc-cap-cell-today { border-bottom: 2px solid var(--color-text-link); }

/* Modals shared */
.qc-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.qc-modal { background: var(--color-bg-surface); border-radius: 10px; padding: 16px 20px; max-width: 960px; max-height: 80vh; width: 90%; overflow-y: auto; }
.qc-cap-roster-modal { max-width: 1400px; }
.qc-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.qc-modal-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
/* Modal close — MUI IconButton pattern: borderless 36px circle with a
 * Feather X SVG that fills via currentColor. Hover gets the standard
 * 6%-black overlay; focus picks up the brand-blue ring. Same idiom as
 * .qc-cap-expand-toggle / .qc-cap-section-toggle so every icon-button
 * in the app reads consistently. */
.qc-modal-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  box-shadow: none;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-modal-close:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.87); }
.qc-modal-close:focus-visible { outline: 2px solid rgba(63, 91, 255, 0.5); outline-offset: 1px; }
.qc-modal-close svg { width: 20px; height: 20px; display: block; }
.qc-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border-subtle); }

/* "How to read this monitoring" help button + modal */
/* Help icon button — MUI IconButton (size: small) treatment:
 * 28×28 circle, transparent surface, brand-blue glyph, light grey hover. */
.qc-cap-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  background: transparent;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.qc-cap-help-btn:hover {
  background: rgba(63, 91, 255, 0.08);
}
.qc-cap-help-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.qc-cap-help-modal { max-width: 760px; }
.qc-cap-help-body { font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: 1.55; }
.qc-cap-help-body section { padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); }
.qc-cap-help-body section:last-child { border-bottom: 0; }
.qc-cap-help-body h4 { margin: 0 0 6px; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.qc-cap-help-body ul { margin: 0; padding-left: 18px; }
.qc-cap-help-body li { margin: 3px 0; }
.qc-cap-help-body code { background: var(--color-border-subtle); padding: 1px 5px; border-radius: 3px; font-size: var(--font-size-xs); }

/* Manage team modal */
.qc-roster-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs); table-layout: fixed; }
.qc-roster-table th, .qc-roster-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; text-align: left; }
.qc-roster-table th:nth-child(1), .qc-roster-table td:nth-child(1) { width: 9%; }   /* Name */
.qc-roster-table th:nth-child(2), .qc-roster-table td:nth-child(2) { width: 17%; }  /* ADO email */
.qc-roster-table th:nth-child(3), .qc-roster-table td:nth-child(3) { width: 11%; }  /* Pillar */
.qc-roster-table th:nth-child(4), .qc-roster-table td:nth-child(4) { width: 27%; }  /* Anchor */
.qc-roster-table th:nth-child(5), .qc-roster-table td:nth-child(5) { width: 27%; }  /* Shadow */
.qc-roster-table th:nth-child(6), .qc-roster-table td:nth-child(6) { width: 9%; }   /* Remove */
.qc-roster-table input[type="text"], .qc-roster-table input[type="email"], .qc-roster-table select { width: 100%; padding: 4px 6px; font-size: var(--font-size-xs); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-surface); min-width: 0; box-sizing: border-box; }
/* Multiselect inside the roster's Pillar column — was rendering
 * full-cell wide and stacking the trigger/chevron when the cell width
 * wasn't constrained (Image #158 broken layout). Lock it to a sensible
 * column width so every Pillar row reads identically. */
.qc-roster-table .ds-multiselect {
  width: 100%;
  min-width: 0;
  max-width: 160px;
}
.qc-roster-projects { display: flex; flex-direction: column; gap: 4px; }

} /* end @layer features */