/* Give the composer, calendar and routine list their own surfaces. */
#routinesView {
  --routine-card-surface: #fff;
  --routine-card-border: #dfe6ef;
  --routine-card-gap: 12px;
  --routine-card-radius: 9px;
  gap: var(--routine-card-gap);
}
#routinesView .metrics { gap: var(--routine-card-gap); }
#routinesView .metric { border-radius: var(--routine-card-radius); }
#routinesView .workspace-card {
  grid-template-columns: minmax(320px, 392px) minmax(0, 1fr);
  align-items: start;
  gap: var(--routine-card-gap);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#routinesView .workspace-card .left-stack {
  min-width: 0;
  gap: var(--routine-card-gap);
  border: 0;
}
#routinesView .workspace-card .content {
  min-width: 0;
  padding: 0;
}
#routinesView .workspace-card .panel {
  min-width: 0;
  border: 1px solid var(--routine-card-border);
  border-radius: var(--routine-card-radius);
  background: var(--routine-card-surface);
  box-shadow: 0 4px 18px rgba(18, 31, 48, .04);
}
#routinesView .workspace-card .routines { min-height: 360px; padding: 20px; }
html[data-interface-theme="dark"] #routinesView {
  --routine-card-surface: #192535;
  --routine-card-border: #34445a;
}
html[data-interface-theme="dark"] #routinesView .workspace-card .panel { box-shadow: none; }
@media (max-width: 1020px) {
  #routinesView .workspace-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #routinesView .workspace-card .routines { padding: 16px; }
}