/* Daily-actions left rail — filter dropdown + Today / Last 7 days / Last 31 days
 * completion stats in a surface-1 card. Figma node 168:4400 (the rail container
 * + Frames 105/106/107). The dropdown field reuses the .rec-rail-field look. */

.actions-rail-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-32);
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-xs);
}

.actions-rail-filter { width: 100%; }

.actions-rail-stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.actions-rail-stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.actions-rail-stat-label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--text-secondary);
}

.actions-rail-stat-figure {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  margin: 0;
}
.actions-rail-stat-done {
  font-family: var(--font-family-display);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-700);
  line-height: 1;
  color: var(--text-primary);
}
.actions-rail-stat-total {
  font-family: var(--font-family-display);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  color: var(--text-tertiary);
}
.actions-rail-stat-pct {
  margin-left: auto;
  font-family: var(--font-family-display);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.actions-rail-stat-track {
  height: var(--spacing-8);
  border-radius: var(--corner-radius-full);
  background-color: var(--background-surface-2);
  overflow: hidden;
}
.actions-rail-stat-fill {
  height: 100%;
  border-radius: var(--corner-radius-full);
  background-color: var(--text-primary);
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}