/* CC v2.0 — per-agent specialty widgets.
   Mercury aesthetic; all colors via tokens from mercury-tokens.css. */

/* --- Shell --- */
.widget {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

.widget-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-4);
}
.widget-title {
  font-size: var(--type-size-lg);
  font-weight: var(--type-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.widget-subtitle {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--type-letter-spacing-wide);
}

.widget-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.widget-loading,
.widget-empty,
.widget-error {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--type-size-sm);
}
.widget-loading { color: var(--text-secondary); }
.widget-empty  { color: var(--color-text-muted); font-style: italic; }
.widget-error  {
  color: var(--color-feedback-error-red);
  background: rgba(239, 68, 68, 0.08);
  border-radius: var(--radius-sm);
}

/* --- Blocks --- */
.widget-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.widget-block-title {
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--type-letter-spacing-wide);
  margin: 0;
}
.widget-note {
  background: var(--color-background-surface-alt);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-size-sm);
}
.widget-meta-line {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.widget-meta-soft { font-style: italic; }

/* --- Lists & rows --- */
.widget-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.widget-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--type-size-sm);
}
.widget-row:last-child { border-bottom: none; }
.widget-row-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}
.widget-row-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.widget-row-label {
  color: var(--text-primary);
  font-weight: var(--type-weight-medium);
  flex: 0 1 auto;
}
.widget-row-meta {
  color: var(--text-secondary);
  font-size: var(--type-size-xs);
  flex: 0 1 auto;
}
.widget-row-detail {
  color: var(--text-secondary);
  font-size: var(--type-size-xs);
  line-height: var(--type-line-height-normal);
}
.widget-row-time {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--type-size-xs);
  font-variant-numeric: tabular-nums;
}
.widget-row-count {
  color: var(--text-primary);
  font-weight: var(--type-weight-semibold);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

.widget-row-bar {
  display: block;
  flex: 1;
  height: 6px;
  background: var(--color-background-surface-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.widget-row-bar-fill {
  display: block;
  height: 100%;
  background: var(--color-brand-lavender);
  border-radius: var(--radius-pill);
  transition: width var(--motion-duration-base) var(--motion-easing-standard);
}

/* --- KPI / stat blocks --- */
.widget-kpi {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.widget-kpi-num {
  font-size: var(--type-size-3xl);
  font-weight: var(--type-weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--type-letter-spacing-tight);
}
.widget-kpi-label {
  font-size: var(--type-size-sm);
  color: var(--text-secondary);
}

.widget-grid-2,
.widget-grid-3 {
  display: grid;
  gap: var(--space-3);
}
.widget-grid-2 { grid-template-columns: 1fr 1fr; }
.widget-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
  .widget-grid-2,
  .widget-grid-3 { grid-template-columns: 1fr; }
}
.widget-stat {
  background: var(--color-background-surface-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.widget-stat-num {
  font-size: var(--type-size-xl);
  font-weight: var(--type-weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.widget-stat-num[data-flag="green"] { color: var(--color-feedback-success-green); }
.widget-stat-num[data-flag="amber"] { color: var(--color-feedback-warning-amber); }
.widget-stat-num[data-flag="red"]   { color: var(--color-feedback-error-red); }
.widget-stat-num[data-flag="flat"]  { color: var(--color-text-muted); }
.widget-stat-sub {
  font-size: var(--type-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--type-weight-medium);
  margin-left: 4px;
}
.widget-stat-label {
  font-size: var(--type-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--type-letter-spacing-wide);
}

/* --- Deltas (Alfred KW) --- */
.widget-delta {
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.widget-delta-up {
  background: rgba(33, 201, 122, 0.12);
  color: var(--color-feedback-success-green);
}
.widget-delta-down {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-feedback-error-red);
}
.widget-delta-flat {
  background: var(--color-background-surface-alt);
  color: var(--color-text-muted);
}

/* --- Severity badges (Hugh audit) --- */
.widget-sev {
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.widget-sev-critical,
.widget-sev-high  { background: rgba(239, 68, 68, 0.12);  color: var(--color-feedback-error-red); }
.widget-sev-medium,
.widget-sev-warn  { background: rgba(245, 165, 36, 0.12); color: var(--color-feedback-warning-amber); }
.widget-sev-low,
.widget-sev-info  { background: rgba(59, 130, 246, 0.12); color: var(--color-feedback-info-blue); }

/* --- Lint / deploy flags --- */
.widget-flag {
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: lowercase;
  letter-spacing: 0;
}
.widget-flag-green { background: rgba(33, 201, 122, 0.12); color: var(--color-feedback-success-green); }
.widget-flag-amber { background: rgba(245, 165, 36, 0.12); color: var(--color-feedback-warning-amber); }
.widget-flag-red   { background: rgba(239, 68, 68, 0.12);  color: var(--color-feedback-error-red); }
.widget-flag-flat  { background: var(--color-background-surface-alt); color: var(--color-text-muted); }

/* --- GSC sparkline (Alfred) --- */
.widget-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 50px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.widget-spark-bar {
  flex: 1;
  min-height: 4px;
  background: linear-gradient(180deg, var(--color-brand-lavender), var(--color-brand-lavender-strong));
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: opacity var(--motion-duration-fast);
}
.widget-spark-bar:hover { opacity: 0.85; }
.widget-spark-meta {
  font-size: var(--type-size-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --- Burn bar (Delos) --- */
.widget-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.widget-bar-track {
  flex: 1;
  height: 10px;
  background: var(--color-background-surface-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.widget-bar-fill {
  height: 100%;
  background: var(--color-brand-lavender);
  border-radius: var(--radius-pill);
  transition: width var(--motion-duration-base) var(--motion-easing-standard);
}
.widget-bar-fill[data-flag="amber"] { background: var(--color-feedback-warning-amber); }
.widget-bar-fill[data-flag="red"]   { background: var(--color-feedback-error-red); }
.widget-bar-fill[data-flag="green"] { background: var(--color-feedback-success-green); }
.widget-bar-label {
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.widget-bar-sublabel {
  color: var(--color-text-muted);
  font-weight: var(--type-weight-medium);
  font-size: var(--type-size-xs);
}

/* --- Platform tiles (Michael) --- */
.widget-platform-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}
@media (max-width: 600px) {
  .widget-platform-row { grid-template-columns: repeat(2, 1fr); }
}
.widget-platform {
  background: var(--color-background-surface-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.widget-platform-count {
  font-size: var(--type-size-xl);
  font-weight: var(--type-weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.widget-platform-label {
  font-size: var(--type-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--type-letter-spacing-wide);
}

/* --- Hash mono (Denton) --- */
.widget-hash {
  font-family: var(--type-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  background: var(--color-background-surface-alt);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: var(--type-size-xs);
  letter-spacing: 0;
}

/* --- Lighthouse pills (Denton) --- */
.widget-lh-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.widget-lh-score {
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}