@layer features {

/* ── Capacity tile (MUI Joy "Bio Card" layout) ─────────────────────────
 * Vertical, centered. Avatar slot is a circular SVG load gauge — ring
 * stroke = tier color, arc length = load%, % filling the donut hole.
 * The card frame keeps the tier border + bg wash so the spot-the-
 * overloaded-QC signal works at two levels (ring color + frame color). */
/* Single-row horizontal strip — exactly 6 cards visible at the row's
 * width, additional cards extend past and become scrollable horizontally.
 * Never wrap. `min-width` floor keeps cards usable on narrow viewports
 * (small screens get a wider scroll instead of unreadable tiny cards). */
.qc-cap-load-tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;                            /* room for scrollbar without clipping card hover shadow */
}
/* Slim native scrollbar — only visible when needed. */
.qc-cap-load-tiles::-webkit-scrollbar { height: 8px; }
.qc-cap-load-tiles::-webkit-scrollbar-track { background: transparent; }
.qc-cap-load-tiles::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
.qc-cap-load-tiles::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); }

.qc-cap-load-tile {
  /* 6 cards across the available row width:
   *   card-width = (100% - 5 gaps × 12px) / 6 = (100% - 60px) / 6
   * `flex: 0 0 …` keeps the card from growing or shrinking; min-width floor
   * forces horizontal scroll once the viewport gets too narrow for 6 to fit. */
  flex: 0 0 calc((100% - 60px) / 6);
  min-width: 200px;
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: var(--color-bg-surface);
  overflow: hidden;                               /* corner radius clips the inner body + footer cleanly */
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.qc-cap-load-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Body — identity, gauge, stats. Light grey wash + center alignment match
 * the MUI Joy Bio Card pattern. */
.qc-cap-load-tile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 14px;
  background: rgba(0, 0, 0, 0.015);               /* MUI Joy Bio Card body wash */
  text-align: center;
  cursor: pointer;
  flex: 1 1 auto;
}

/* Footer — sits below a 1px hairline divider, hosts 1 or 2 action buttons.
 * Same grey wash as the body so the bio-card feel is preserved; the
 * divider above is the only visible seam. */
.qc-cap-load-tile-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.015);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.qc-cap-load-tile-footer:has(.qc-cap-load-tile-btn + .qc-cap-load-tile-btn) {
  grid-template-columns: 1fr 1fr;                 /* 2 buttons → equal halves */
}
.qc-cap-load-tile-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: rgba(0, 0, 0, 0.78);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-cap-load-tile-btn:hover {
  background: rgba(63, 91, 255, 0.04);
  border-color: rgba(63, 91, 255, 0.45);
  color: var(--color-accent);
}
.qc-cap-load-tile-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(63, 91, 255, 0.35);
}

/* Avatar slot — circular initials chip with a colored tier-badge dot
 * positioned at the top-right corner (MUI Joy Bio Card pattern, Image #143).
 * Tier color flows into the badge background via currentColor on the
 * `.load-{tier}` parent. */
.qc-cap-load-tile-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.qc-cap-load-tile-avatar-inner {
  position: relative;                            /* containing block for the img layer */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);              /* MUI Avatar neutral fallback (no photo) */
  color: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-sans);
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  line-height: 1;
  overflow: hidden;
  user-select: none;
}
.qc-cap-load-tile-avatar-initials {
  /* The initials sit underneath the img — visible when the img fails
   * to load and is removed by `onerror`. No JS needed for the fallback. */
  pointer-events: none;
}
.qc-cap-load-tile-avatar-img {
  /* Overlays the initials. `onerror="this.remove()"` deletes the element
   * when ADO returns 404 (no avatar for that email) — initials underneath
   * become visible. Background-color while loading hides the initials flash. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.08);
}
.qc-cap-load-tile-avatar-locked {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.38);
}
/* Tier badge — small solid dot in the top-right corner of the avatar,
 * inheriting the tier color via `currentColor` from .load-{tier}.
 * A 2px white border separates it from the avatar circle visually so it
 * reads as a status pip, not part of the photo. */
.qc-cap-load-tile-avatar-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: currentColor;
  border: 2px solid var(--color-bg-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* Tier chip (the "PRO" badge equivalent) — small pill below the gauge */
.qc-cap-load-tile-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* Identity: name (h-style) + pillar (secondary subtitle) */
.qc-cap-load-tile-name {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.3;
  margin: 0;
  white-space: normal;                          /* allow names to wrap to 2 lines */
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.qc-cap-load-tile-pillar {
  font-family: var(--font-family-sans);
  font-size: 11px;
  font-weight: var(--font-weight-regular);
  color: rgba(0, 0, 0, 0.54);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* Stats block — terse data lines separated from identity by a hairline */
.qc-cap-load-tile-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.qc-cap-load-tile-stat-row {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  color: rgba(0, 0, 0, 0.87);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.qc-cap-load-tile-stat-row strong {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.qc-cap-load-tile-stat-label {
  color: rgba(0, 0, 0, 0.54);
  font-weight: var(--font-weight-regular);
}
.qc-cap-load-tile-stat-sep {
  color: rgba(0, 0, 0, 0.2);
}
.qc-cap-load-tile-stat-sub {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.54);
}
.qc-cap-load-tile-stat-off {
  font-style: italic;
}

/* Sprint label (current-sprint mode only) */
.qc-cap-load-tile-sprint {
  font-family: var(--font-family-sans);
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.3;
}
.qc-cap-load-tile-sprint strong {
  color: rgba(0, 0, 0, 0.87);
  font-weight: var(--font-weight-semibold);
}

/* "est" basis badge — sits next to the name */
.qc-cap-load-tile-est {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Throughput basis modal — stats panel above the items table */
/* Throughput-basis side panel: stats are split into "Current Window" and
   "Past Window" sections so the reader sees how Load% is built up before
   diving into the historical baseline that drives it. */
.qc-cap-throughput-section { margin: 12px 0; padding: 12px 16px 14px; background: var(--color-bg-surface-alt); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.qc-cap-throughput-section + .qc-cap-throughput-section { margin-top: 10px; }
.qc-cap-throughput-section-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-default); }
.qc-cap-throughput-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; align-items: start; }
.qc-cap-throughput-stat-wide { grid-column: 1 / -1; }
.qc-cap-throughput-stat-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.qc-cap-throughput-stat-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.qc-cap-throughput-stat-sub { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); margin-left: 4px; }
.qc-cap-throughput-stat-hint { color: var(--color-text-secondary); }

/* Breakdown block — one row per contribution so the volume / closures math
   is readable instead of one long inline string. */
.qc-cap-break-block { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--color-border-subtle); }
.qc-cap-break-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.qc-cap-break-row { font-size: var(--font-size-xs); color: var(--color-text-primary); line-height: 1.6; font-variant-numeric: tabular-nums; }
.qc-cap-break-row strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.qc-cap-break-label { display: inline-block; min-width: 60px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }

/* Key value: e.g., the "39" in "39 of 44 working days". The eye should land
   here first; it's the number used in every formula on this card. */
.qc-cap-throughput-hl {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
  color: var(--color-text-link);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  line-height: 1.3;
}

/* Inline formula chip: e.g., "= 27.00 ÷ 39". Monospace + soft amber tint so
   the user sees "this is a calculation" without it competing with the key
   value. Wraps as a single unit; never breaks mid-expression. */
.qc-cap-throughput-formula {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  letter-spacing: 0;
}
@media (max-width: 700px) { .qc-cap-throughput-stats { grid-template-columns: 1fr; } }
/* Old single-row tile layout rules removed — superseded by the Bio Card
 * layout above (.qc-cap-load-tile-avatar / __gauge / __pct / __tier-chip
 * / __name / __pillar / __stats). */

/* Activity-mix stacked bar — delegation split for the lookback window.
   Rendered inside the Throughput-basis modal. */
.qc-cap-activity { margin: 12px 0 4px; cursor: help; }
.qc-cap-activity-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: 5px; }
.qc-cap-activity-label strong { color: var(--color-text-primary); }
.qc-cap-activity-stack { display: flex; height: 16px; border-radius: var(--radius-sm); overflow: hidden; background: rgba(0,0,0,0.06); }
.qc-cap-activity-seg { display: flex; align-items: center; justify-content: center; padding: 0 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); white-space: nowrap; overflow: hidden; }
.qc-cap-activity-seg-items   { background: var(--color-text-link); }
.qc-cap-activity-seg-auto    { background: #059669; }
.qc-cap-activity-seg-testex  { background: #6b21a8; }
.qc-cap-activity-seg-bugs    { background: #b91c1c; }
.qc-cap-activity-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 6px; }
.qc-cap-activity-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.qc-cap-activity-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Workload-delegation pie inside each QC card — current-window slice
   per project, sourced from the same `perProject` rows shown in the
   table below it. */
.qc-cap-pie { display: flex; align-items: center; gap: 18px; margin: 12px 0 14px; padding: 10px 4px; cursor: help; }
.qc-cap-pie-disk { position: relative; width: 110px; height: 110px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
/* SVG donut fills the disk; the hole div sits absolutely on top of it.
   Slices are individual <path> elements so each one is a click target. */
.qc-cap-pie-svg { display: block; width: 100%; height: 100%; }
/* QC team-workload pie slice — MUI X hover: subtle scale + brightness
 * bump, with the chart-stroke separator between slices. */
.qc-cap-pie-slice {
  cursor: pointer;
  stroke: var(--chart-stroke, #fff);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 150ms ease;
  transform-origin: 50% 50%;
  vector-effect: non-scaling-stroke;
}
.qc-cap-pie-slice:hover { transform: scale(1.03); filter: brightness(1.06); }
.qc-cap-pie-slice:focus { outline: none; }
.qc-cap-pie-slice:focus-visible { stroke: var(--color-accent); stroke-width: 2.5; }
.qc-cap-pie-hole { position: absolute; inset: 22px; background: var(--color-bg-surface); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.qc-cap-pie-hole strong { font-size: 22px; font-weight: var(--font-weight-bold); line-height: 1; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.qc-cap-pie-hole small { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; }
.qc-cap-pie-legend { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qc-cap-pie-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--color-text-primary); flex-wrap: wrap; }
/* Clickable legend chip — mirrors the slice click. Subtle hover lift so
   the affordance is visible without being noisy. */
.qc-cap-pie-legend-clickable { cursor: pointer; padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-sm); transition: background 0.15s; }
.qc-cap-pie-legend-clickable:hover { background: rgba(0, 0, 0, 0.04); }
.qc-cap-pie-legend-clickable:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.qc-cap-pie-swatch { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.qc-cap-pie-legend-label { font-weight: var(--font-weight-medium); }
.qc-cap-pie-legend-role { font-size: var(--font-size-xs); padding: 1px 6px; border-radius: 10px; background: rgba(0,0,0,0.04); color: var(--color-text-secondary); }
/* Role chip colors deliberately use hues OUTSIDE the status-color set
   (rust=Open, blue=In Progress, green=Done, amber=Forecast) so the type
   pie and role badges can't be misread as pipeline state. */
.qc-cap-pie-legend-role.is-anchor { background: rgba(63, 91, 255, 0.12); color: #1e3a99; }
.qc-cap-pie-legend-role.is-shadow { background: #e0e7ff; color: #4338ca; }
.qc-cap-pie-legend-role.is-injection { background: #fae8ff; color: #a21caf; }
.qc-cap-pie-legend-role.is-test-excellence { background: #f3e8ff; color: #6b21a8; }
.qc-cap-pie-legend-role.is-automation { background: #ccfbf1; color: #0f766e; }
/* Status-pie legend chips reuse the bucket palette from the workload
 * pills below (.qc-cap-bucket-pill.*) — same MUI semantic tints so the
 * pie legend, donut slices, and per-project workload pills all speak
 * the same color story (red / yellow / green / blue). */
.qc-cap-pie-legend-role.bucket-open       { background: rgba(211, 47, 47, 0.14);  color: #b71c1c; }
.qc-cap-pie-legend-role.bucket-inprogress { background: rgba(249, 168, 37, 0.22); color: #6a4500; }
.qc-cap-pie-legend-role.bucket-closed     { background: rgba(46, 125, 50, 0.14);  color: #1b5e20; }
.qc-cap-pie-legend-role.bucket-forecast   { background: rgba(25, 118, 210, 0.14); color: #0d47a1; }
.qc-cap-pie-legend-count { color: var(--color-text-secondary); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }

/* Row of pies (role + status) shown above the project table in each QC card. */
.qc-cap-card-pies { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; }
/* Pies (left) + Throughput Trend (right) share the card's full-width row.
   On narrow viewports they stack vertically. */
/* Card body: a 3:3:4 grid — By-type pie, By-status pie, Throughput Trend.
   Trend gets the biggest share because it carries the most info density
   (multiple lines × sprints × value labels). Below 900px the three
   blocks stack vertically. */
/* Card body row: 2-column grid — tabbed workload pie (left) + throughput
 * trend (right). The pie cell toggles between By Type and By Status via
 * the qc-cap-pie-toggle tab bar (see qcCapTabbedWorkloadChartHtml). */
.qc-cap-card-row { display: grid; grid-template-columns: 5fr 5fr; gap: 14px; align-items: start; margin: 12px 0 4px; }
.qc-cap-card-row > .qc-cap-pie-wrap { min-width: 0; }
.qc-cap-card-row > .qc-cap-trend { min-width: 0; }
.qc-cap-pie-wrap-empty,
.qc-cap-trend-empty { visibility: hidden; }
@media (max-width: 900px) {
  .qc-cap-card-row { grid-template-columns: 1fr; }
}


} /* end @layer features */