@layer features {

/* ── Capacity & Workload Forecast (future-only page) ────────────────── */
.qc-fcst-tiles { padding: 16px 0; }
/* Forecast Capacity — section panel matching Team Capacity / Team
 * Workload / Delivery Monitoring / Delivery Plan. Same frame: soft grey
 * border, surface bg, 12px radius, padding, 20px vertical margin. */
.qc-fcst-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-fcst-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.qc-fcst-panel-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
/* Collapse rule — same pattern as the other three sections. */
.qc-fcst-panel.is-collapsed > :not(.qc-fcst-panel-header) { display: none; }
.qc-fcst-panel.is-collapsed > .qc-fcst-panel-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.qc-fcst-panel-total { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.qc-fcst-panel-total strong { font-size: var(--font-size-sm); color: var(--color-text-link); font-weight: var(--font-weight-bold); }
.qc-fcst-panel-footer { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 14px; padding: 8px 10px; background: var(--color-bg-surface-alt); border-radius: 6px; line-height: 1.5; }

.qc-fcst-tiles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }

.qc-fcst-tile { padding: 14px 16px; border: 2px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-surface-alt); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; cursor: pointer; }
.qc-fcst-tile:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-color: var(--c-info-500); }
.qc-fcst-tile-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.qc-fcst-tile-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.qc-fcst-tile-pillar { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.qc-fcst-tile-value { font-size: 26px; font-weight: var(--font-weight-bold); color: var(--color-text-link); line-height: 1.1; font-variant-numeric: tabular-nums; }
.qc-fcst-tile-value-unit { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.qc-fcst-tile-basis { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: var(--color-warning-bg); color: var(--color-warning-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; cursor: help; }
.qc-fcst-tile-formula { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 4px; padding-bottom: 8px; border-bottom: 1px dashed var(--color-border-subtle); }
.qc-fcst-tile-days { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.qc-fcst-tile-days-row { display: flex; gap: 6px; align-items: baseline; }
.qc-fcst-tile-days-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; flex: 0 0 70px; }
.qc-fcst-tile-days strong { color: var(--color-text-primary); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.qc-fcst-tile-days-off strong { color: var(--color-warning-text); }


} /* end @layer features */